diff --git a/app/globals.css b/app/globals.css
index 8b09ce4..84ff6ef 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,30 +1,178 @@
 @import "tailwindcss";
 
+/*
+ * === ERitors Scribe Design Tokens ===
+ *
+ * Theme values are defined in :root and overridable via [data-theme].
+ * The @theme block references these variables so Tailwind utilities
+ * (bg-primary, text-muted, etc.) automatically follow the active theme.
+ *
+ * COLORS:
+ *   Brand ........... primary, primary-dark, primary-light
+ *   Surfaces ........ background, dark-background, darkest-background, secondary, tertiary
+ *   Semantic surfaces surface-primary, surface-secondary, surface-elevated
+ *   Text ............ text-primary, text-secondary, muted, text-dimmed
+ *   Semantic ........ success, error, warning, info
+ *   Editor .......... editor-text, editor-bold, editor-heading, editor-page-sepia
+ *   Scrollbar ....... scrollbar-track, scrollbar-thumb, scrollbar-thumb-hover
+ *   Utility ......... glass-bg, surface-gradient-dark, surface-gradient-light
+ *   Accents ......... accent-blue, accent-green, accent-orange, accent-purple, accent-red
+ *   Interactive ..... interactive, interactive-hover
+ *
+ * SHADOWS: shadow-feature-hover, shadow-focus-ring
+ * FONTS:   font-family-lora, font-family-lora-italic, font-family-adlam
+ */
+
+:root, :root[data-theme="dark"] {
+    /* Brand */
+    --theme-primary: #51AE84;
+    --theme-primary-dark: #3A8B69;
+    --theme-primary-light: #74C9A0;
+
+    /* Surfaces */
+    --theme-secondary: #393B40;
+    --theme-tertiary: #26272B;
+    --theme-background: #1E1E22;
+    --theme-dark-background: #1B1C1F;
+    --theme-darkest-background: #191A1C;
+    --theme-surface-gradient-dark: #313337;
+    --theme-surface-gradient-light: #45474D;
+    --theme-glass-bg: rgba(43, 45, 48, 0.7);
+
+    /* Text */
+    --theme-text-primary: #F0F0F4;
+    --theme-text-secondary: #BCBEC4;
+    --theme-muted: #B0B0B0;
+    --theme-text-dimmed: #6F737A;
+
+    /* Semantic */
+    --theme-success: #28A745;
+    --theme-error: #DC3545;
+    --theme-warning: #FFC107;
+    --theme-info: #17A2B8;
+
+    /* Gray scale */
+    --theme-gray: #808388;
+    --theme-gray-light: #A0A3A8;
+    --theme-gray-dark: #45474D;
+
+    /* Scrollbar */
+    --theme-scrollbar-track: #1E1F22;
+    --theme-scrollbar-thumb: #51AE84;
+    --theme-scrollbar-thumb-hover: #3A8B69;
+
+    /* Editor content */
+    --theme-editor-text: #E0E0E4;
+    --theme-editor-bold: #F0F0F4;
+    --theme-editor-heading: #34acd0;
+    --theme-editor-page-sepia: #f4f1e8;
+
+    /* Accents */
+    --theme-accent-blue: #5C9CE6;
+    --theme-accent-green: #5FB87B;
+    --theme-accent-orange: #D4923A;
+    --theme-accent-purple: #B07CD8;
+    --theme-accent-red: #E06C75;
+
+    /* Shadows */
+    --theme-shadow-feature-hover: 0 10px 25px -5px rgba(81, 174, 132, 0.2);
+    --theme-shadow-focus-ring: 0 0 0 4px rgba(81, 174, 132, 0.1);
+}
+
+/* Light theme — à remplir quand le design sera prêt */
+:root[data-theme="light"] {
+    --theme-background: #F5F5F5;
+    --theme-secondary: #E0E0E0;
+    --theme-tertiary: #EBEBEB;
+    --theme-dark-background: #D5D5D5;
+    --theme-darkest-background: #C0C0C0;
+    --theme-surface-gradient-dark: #D0D0D0;
+    --theme-surface-gradient-light: #E8E8E8;
+    --theme-glass-bg: rgba(240, 240, 240, 0.7);
+    --theme-text-primary: #1A1A1A;
+    --theme-text-secondary: #555555;
+    --theme-muted: #888888;
+    --theme-text-dimmed: #999999;
+    --theme-scrollbar-track: #E0E0E0;
+    --theme-scrollbar-thumb: #51AE84;
+    --theme-scrollbar-thumb-hover: #3A8B69;
+    --theme-editor-text: #333333;
+    --theme-editor-bold: #1A1A1A;
+    --theme-editor-heading: #2196B8;
+    --theme-editor-page-sepia: #f4f1e8;
+    --theme-gray: #999999;
+    --theme-gray-light: #BBBBBB;
+    --theme-gray-dark: #666666;
+    --theme-accent-blue: #3A7BD5;
+    --theme-accent-green: #2E8B57;
+    --theme-accent-orange: #C47F17;
+    --theme-accent-purple: #8B5CC4;
+    --theme-accent-red: #C94F5A;
+}
+
 @theme {
-    /* Colors */
-    --color-primary: #51AE84;
-    --color-primary-dark: #3A8B69;
-    --color-primary-light: #74C9A0;
-    --color-secondary: #3E3E3E;
-    --color-tertiary: #2C2C2C;
-    --color-background: #2B2D30;
-    --color-dark-background: #2C2C2C;
-    --color-darkest-background: #1A1A1A;
-    --color-text-primary: #FFFFFF;
-    --color-text-secondary: #B0B0B0;
-    --color-muted: #B0B0B0;
-    --color-success: #28A745;
-    --color-error: #DC3545;
-    --color-warning: #FFC107;
-    --color-info: #17A2B8;
+    /* Brand */
+    --color-primary: var(--theme-primary);
+    --color-primary-dark: var(--theme-primary-dark);
+    --color-primary-light: var(--theme-primary-light);
 
-    --color-gray: #808080;
-    --color-gray-light: #A0A0A0;
-    --color-gray-dark: #404040;
+    /* Surfaces */
+    --color-secondary: var(--theme-secondary);
+    --color-tertiary: var(--theme-tertiary);
+    --color-background: var(--theme-background);
+    --color-dark-background: var(--theme-dark-background);
+    --color-darkest-background: var(--theme-darkest-background);
+    --color-surface-gradient-dark: var(--theme-surface-gradient-dark);
+    --color-surface-gradient-light: var(--theme-surface-gradient-light);
+    --color-glass-bg: var(--theme-glass-bg);
 
-    /* Aliases pour compatibilité */
-    --color-textPrimary: #FFFFFF;
-    --color-textSecondary: #B0B0B0;
+    /* Semantic surfaces */
+    --color-surface-primary: var(--theme-background);
+    --color-surface-secondary: var(--theme-secondary);
+    --color-surface-elevated: var(--theme-darkest-background);
+
+    /* Text */
+    --color-text-primary: var(--theme-text-primary);
+    --color-text-secondary: var(--theme-text-secondary);
+    --color-muted: var(--theme-muted);
+    --color-text-dimmed: var(--theme-text-dimmed);
+
+    /* Semantic */
+    --color-success: var(--theme-success);
+    --color-error: var(--theme-error);
+    --color-warning: var(--theme-warning);
+    --color-info: var(--theme-info);
+
+    /* Gray scale */
+    --color-gray: var(--theme-gray);
+    --color-gray-light: var(--theme-gray-light);
+    --color-gray-dark: var(--theme-gray-dark);
+
+    /* Scrollbar */
+    --color-scrollbar-track: var(--theme-scrollbar-track);
+    --color-scrollbar-thumb: var(--theme-scrollbar-thumb);
+    --color-scrollbar-thumb-hover: var(--theme-scrollbar-thumb-hover);
+
+    /* Editor content */
+    --color-editor-text: var(--theme-editor-text);
+    --color-editor-bold: var(--theme-editor-bold);
+    --color-editor-heading: var(--theme-editor-heading);
+    --color-editor-page-sepia: var(--theme-editor-page-sepia);
+
+    /* Accents */
+    --color-accent-blue: var(--theme-accent-blue);
+    --color-accent-green: var(--theme-accent-green);
+    --color-accent-orange: var(--theme-accent-orange);
+    --color-accent-purple: var(--theme-accent-purple);
+    --color-accent-red: var(--theme-accent-red);
+
+    /* Interactive */
+    --color-interactive: var(--theme-primary);
+    --color-interactive-hover: var(--theme-primary-dark);
+
+    /* Shadows */
+    --shadow-feature-hover: var(--theme-shadow-feature-hover);
+    --shadow-focus-ring: var(--theme-shadow-focus-ring);
 
     /* Font Family */
     --font-family-lora: 'Lora', Georgia, serif;
@@ -53,15 +201,8 @@
     font-style: normal;
 }
 
-:root {
-    --foreground-rgb: 0, 0, 0;
-    --background-start-rgb: 214, 219, 220;
-    --background-end-rgb: 255, 255, 255;
-}
-
 body {
-    --tw-bg-opacity: 1;
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity))
+    background-color: var(--color-background);
 }
 
 ::-webkit-scrollbar {
@@ -70,23 +211,23 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-    background: #2d2d2d;
+    background: var(--color-scrollbar-track);
     border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #51AE84;
+    background: var(--color-scrollbar-thumb);
     border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: #3a8b69;
+    background: var(--color-scrollbar-thumb-hover);
 }
 
 /* Scrollbar Styles for Firefox */
 * {
     scrollbar-width: thin;
-    scrollbar-color: #51AE84 #2d2d2d;
+    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
 }
 
 .fade-in {
@@ -200,8 +341,15 @@ body {
 }
 
 /* Styles pour l'éditeur principal avec classes dynamiques */
+.editor-content .tiptap > p:first-child,
+.editor-content .tiptap > h1:first-child,
+.editor-content .tiptap > h2:first-child,
+.editor-content .tiptap > h3:first-child {
+    margin-top: 0;
+}
+
 .editor-content .tiptap p {
-    color: #dedede;
+    color: var(--color-editor-text);
     margin-top: 0.7em;
     margin-bottom: 0.7em;
 }
@@ -212,11 +360,11 @@ body {
 
 .editor-content .tiptap p strong {
     font-weight: 900;
-    color: #f9f9f9;
+    color: var(--color-editor-bold);
 }
 
 .editor-content .tiptap h1, .editor-content .tiptap h2, .editor-content .tiptap h3 {
-    color: #34acd0;
+    color: var(--color-editor-heading);
     margin-top: 1em;
     margin-bottom: 0.5em;
 }
@@ -251,6 +399,7 @@ body {
     border: none !important;
 }
 
+
 .composer-panel-h {
     height: calc(100vh - 8rem);
 }
@@ -286,13 +435,13 @@ body {
     position: relative;
     transition: all 0.3s ease;
     overflow: hidden;
-    background-color: #3E3E3E;
+    background-color: var(--color-secondary);
     border-radius: 0.75rem;
 }
 
 .feature-card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 10px 25px -5px rgba(81, 174, 132, 0.2);
+    box-shadow: var(--shadow-feature-hover);
 }
 
 .feature-card-bg {
@@ -310,7 +459,7 @@ body {
     width: 4rem;
     height: 4rem;
     border-radius: 50%;
-    background: linear-gradient(135deg, #313131, #4A4A4A);
+    background: linear-gradient(135deg, var(--color-surface-gradient-dark), var(--color-surface-gradient-light));
     display: flex;
     align-items: center;
     justify-content: center;
@@ -331,7 +480,7 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: white;
+    color: var(--color-text-primary);
 }
 
 .feature-title-container {
@@ -356,7 +505,7 @@ body {
 .feature-shine-line {
     width: 100%;
     height: 1px;
-    background-color: #4A4A4A;
+    background-color: var(--color-surface-gradient-light);
     position: relative;
     overflow: hidden;
 }
@@ -421,7 +570,7 @@ body {
     width: 4rem;
     height: 4rem;
     border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: var(--color-glass-bg);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -446,7 +595,7 @@ body {
 }
 
 .last-updated {
-    color: #777777;
+    color: var(--color-text-dimmed);
     font-size: 0.75rem;
     text-align: center;
     margin-top: 1rem;
@@ -484,19 +633,42 @@ body {
     margin-bottom: 0.7em;
 }
 
+/* Form input base */
+.input-base {
+    @apply w-full text-text-primary bg-dark-background px-4 py-2.5 rounded-xl
+    border border-secondary
+    focus:border-primary focus:ring-4 focus:ring-primary/20
+    placeholder:text-muted
+    outline-none transition-all duration-200;
+}
+
+.input-base:disabled {
+    @apply opacity-50 cursor-not-allowed;
+}
+
+.input-base[readonly] {
+    @apply cursor-default;
+}
+
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+}
+
 /* Smooth transitions for all interactive elements */
 button, a, input, textarea, select {
     transition: all 0.2s ease-in-out;
 }
 
 /* Enhanced focus states */
-button:focus-visible,
-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible {
-    outline: 2px solid #51AE84;
+button:focus-visible {
+    outline: 2px solid var(--color-primary);
     outline-offset: 2px;
-    box-shadow: 0 0 0 4px rgba(81, 174, 132, 0.1);
+    box-shadow: var(--shadow-focus-ring);
 }
 
 /* Smooth hover scale for interactive elements */
@@ -509,7 +681,7 @@ select:focus-visible {
 .literary-ornament::before,
 .literary-ornament::after {
     content: "❖";
-    color: #51AE84;
+    color: var(--color-primary);
     opacity: 0.3;
     font-size: 0.8em;
     margin: 0 0.5em;
@@ -531,9 +703,9 @@ select:focus-visible {
 
 /* Glass morphism effect */
 .glass-effect {
-    background: rgba(62, 62, 62, 0.7);
+    background: var(--color-glass-bg);
     backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--color-surface-gradient-light);
 }
 
 /* Fade in pour le texte qui stream */
@@ -549,3 +721,38 @@ select:focus-visible {
         opacity: 1;
     }
 }
+
+/* Alert animations */
+@keyframes shrink {
+    from {
+        width: 100%;
+    }
+    to {
+        width: 0%;
+    }
+}
+
+.alert-progress-shrink {
+    animation: shrink 5s linear forwards;
+    width: 100%;
+}
+
+.alert-slide-in {
+    animation: slideInFromRight 0.3s ease-out forwards;
+}
+
+/* Pulse dots for loading indicators */
+.pulse-dot-1 {
+    animation-delay: 0ms;
+    animation-duration: 1.5s;
+}
+
+.pulse-dot-2 {
+    animation-delay: 300ms;
+    animation-duration: 1.5s;
+}
+
+.pulse-dot-3 {
+    animation-delay: 600ms;
+    animation-duration: 1.5s;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index f524906..159a6bf 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,21 +1,30 @@
+import type {Metadata} from "next";
 import "./globals.css";
 import {ReactNode} from "react";
+import ScribeShell from "@/components/layout/ScribeShell";
+
+export const metadata: Metadata = {
+    title: "ERitors Scribe",
+    description: "Les meilleurs livres sont ceux qui ont le meilleur plan.",
+    icons: {
+        icon: "/eritors-favicon-white.png"
+    },
+    robots: {
+        index: false,
+        follow: false,
+    },
+};
 
 export default function RootLayout(
     {
         children,
     }: Readonly<{
         children: ReactNode;
-}>) {
+    }>) {
     return (
         <html lang="fr">
-        <head>
-            <title>ERitors Scribe</title>
-            <meta name="description" content="Les meilleurs livres sont ceux qui ont le meilleur plan." />
-            <link rel="icon" href="/eritors-favicon-white.png" />
-        </head>
         <body>
-        {children}
+        <ScribeShell>{children}</ScribeShell>
         </body>
         </html>
     );
diff --git a/app/login/LoginWrapper.tsx b/app/login/LoginWrapper.tsx
index abb7dc6..c00236f 100644
--- a/app/login/LoginWrapper.tsx
+++ b/app/login/LoginWrapper.tsx
@@ -1,29 +1,19 @@
-'use client'
-
-import frMessages from '@/lib/locales/fr.json';
-import enMessages from '@/lib/locales/en.json';
 import {useEffect, useState} from "react";
 import {LangContext} from "@/context/LangContext";
-import {NextIntlClientProvider} from "next-intl";
-import StaticAlert from "@/components/StaticAlert";
-import {SessionProps} from "@/lib/models/Session";
-import System from "@/lib/models/System";
+import StaticAlert from "@/components/ui/StaticAlert";
+import {SessionProps} from "@/lib/types/session";
+import {getCookie} from "@/lib/utils/cookies";
 import {SessionContext} from "@/context/SessionContext";
 import {AlertContext} from "@/context/AlertContext";
+import {changeLanguage} from "@/lib/i18n";
 import * as tauri from '@/lib/tauri';
 
-const messagesMap = {
-    fr: frMessages,
-    en: enMessages
-};
-
 export default function LoginWrapper({children}: { children: React.ReactNode }) {
     const [locale, setLocale] = useState<'fr' | 'en'>('fr');
     const [errorMessage, setErrorMessage] = useState('');
     const [successMessage, setSuccessMessage] = useState('');
     const [infoMessage, setInfoMessage] = useState('');
     const [warningMessage, setWarningMessage] = useState('');
-    const messages = messagesMap[locale];
 
     const [session, setSession] = useState<SessionProps>({
         isConnected: false,
@@ -35,6 +25,10 @@ export default function LoginWrapper({children}: { children: React.ReactNode })
         checkAuthentification().then()
     }, []);
 
+    useEffect((): void => {
+        changeLanguage(locale);
+    }, [locale]);
+
     useEffect((): void => {
         if (session.isConnected) {
             tauri.loginSuccess();
@@ -42,36 +36,36 @@ export default function LoginWrapper({children}: { children: React.ReactNode })
     }, [session]);
 
     async function checkAuthentification(): Promise<void> {
-        const language: "fr" | "en" | null = System.getCookie('lang') as "fr" | "en" | null;
+        const language: "fr" | "en" | null = getCookie('lang') as "fr" | "en" | null;
         if (language) {
             setLocale(language);
         }
-
-        // Pas besoin de vérifier le token ici dans Electron
-        // Le main process gère quelle fenêtre ouvrir
     }
-    
+
     return (
         <SessionContext.Provider value={{session: session, setSession: setSession}}>
             <LangContext.Provider value={{lang: locale, setLang: setLocale}}>
-                <NextIntlClientProvider locale={locale} messages={messages}>
-                    <AlertContext.Provider value={{errorMessage: setErrorMessage, successMessage: setSuccessMessage, infoMessage: setInfoMessage, warningMessage: setWarningMessage}}>
-                        {children}
-                        <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-3">
-                            {
-                                successMessage && <StaticAlert type={'success'} message={successMessage} onClose={() => {
-                                    setSuccessMessage('')
-                                }}/>
-                            }
-                            {
-                                errorMessage && <StaticAlert type={'error'} message={errorMessage} onClose={() => {
-                                    setErrorMessage('')
-                                }}/>
-                            }
-                        </div>
-                    </AlertContext.Provider>
-                </NextIntlClientProvider>
+                <AlertContext.Provider value={{
+                    errorMessage: setErrorMessage,
+                    successMessage: setSuccessMessage,
+                    infoMessage: setInfoMessage,
+                    warningMessage: setWarningMessage
+                }}>
+                    {children}
+                    <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-3">
+                        {
+                            successMessage && <StaticAlert type={'success'} message={successMessage} onClose={() => {
+                                setSuccessMessage('')
+                            }}/>
+                        }
+                        {
+                            errorMessage && <StaticAlert type={'error'} message={errorMessage} onClose={() => {
+                                setErrorMessage('')
+                            }}/>
+                        }
+                    </div>
+                </AlertContext.Provider>
             </LangContext.Provider>
         </SessionContext.Provider>
     )
-}
\ No newline at end of file
+}
diff --git a/app/login/login/LoginForm.tsx b/app/login/login/LoginForm.tsx
index 6fdaad1..233e07e 100755
--- a/app/login/login/LoginForm.tsx
+++ b/app/login/login/LoginForm.tsx
@@ -1,117 +1,106 @@
-import {useContext, useState} from "react";
-import System from "@/lib/models/System";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faEnvelope, faLock} from "@fortawesome/free-solid-svg-icons";
-import {AlertContext} from "@/context/AlertContext";
-import {useTranslations} from "next-intl";
-import {LangContext, LangContextProps} from "@/context/LangContext";
-import * as tauri from '@/lib/tauri';
-
-export default function LoginForm() {
-    const {errorMessage} = useContext(AlertContext);
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-    const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext)
-    
-    async function handleSubmit(e: React.FormEvent): Promise<void> {
-        e.preventDefault();
-        setIsLoading(true);
-        errorMessage('');
-        
-        if (email.length === 0) {
-            errorMessage(t('loginForm.error.emailRequired'));
-            return;
-        }
-        if (password.length === 0) {
-            errorMessage(t('loginForm.error.passwordRequired'));
-            return;
-        }
-        if (email.length < 3) {
-            errorMessage(t('loginForm.error.emailLength'));
-            return;
-        }
-        
-        if (System.verifyInput(email) || System.verifyInput(password)) {
-            errorMessage(t('loginForm.error.emailInvalidChars'));
-            return;
-        }
-        try {
-            const response: string = await System.postToServer<string>('login', {
-                email: email,
-                password: password,
-            }, lang)
-            if (!response) {
-                errorMessage(t('loginForm.error.connection'));
-                setIsLoading(false);
-                return;
-            }
-            await tauri.setToken(response);
-            await tauri.loginSuccess();
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(t('loginForm.error.server'));
-            } else {
-                errorMessage(t('loginForm.error.unknown'));
-            }
-        } finally {
-            setIsLoading(false);
-        }
-    }
-    
-    return (
-        <form onSubmit={handleSubmit}>
-            <div className="mb-5">
-                <label htmlFor="email" className="block text-sm font-medium mb-1 text-muted">
-                    {t('loginForm.fields.email.label')}
-                </label>
-                <div className="relative">
-                    <FontAwesomeIcon icon={faEnvelope}
-                                     className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
-                    <input
-                        type="email"
-                        id="email"
-                        placeholder={t('loginForm.fields.email.placeholder')}
-                        className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
-                        required
-                    />
-                </div>
-            </div>
-            
-            <div className="mb-5">
-                <div className="flex justify-between items-center mb-1">
-                    <label htmlFor="password" className="block text-sm font-medium text-muted">
-                        {t('loginForm.fields.password.label')}
-                    </label>
-                    <a href="/login/reset-password" className="text-xs text-primary hover:underline">
-                        {t('loginForm.fields.password.forgot')}
-                    </a>
-                </div>
-                <div className="relative">
-                    <FontAwesomeIcon icon={faLock}
-                                     className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
-                    <input
-                        type="password"
-                        id="password"
-                        placeholder={t('loginForm.fields.password.placeholder')}
-                        className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
-                        value={password}
-                        onChange={(e) => setPassword(e.target.value)}
-                        required
-                    />
-                </div>
-            </div>
-            
-            <button
-                type="submit"
-                className={`w-full py-4 mb-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all ${isLoading ? 'opacity-75 cursor-not-allowed' : ''}`}
-                disabled={isLoading}
-            >
-                {isLoading ? t('loginForm.loading') : t('loginForm.submit')}
-            </button>
-        </form>
-    )
-}
+import {useContext, useState} from "react";
+import {Mail, Lock} from "lucide-react";
+import {AlertContext} from "@/context/AlertContext";
+import {useTranslations} from "@/lib/i18n";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+import * as tauri from '@/lib/tauri';
+import {verifyInput} from "@/lib/utils/validation";
+import {apiPostPublic} from "@/lib/api/client";
+import Button from "@/components/ui/Button";
+import InputField from "@/components/form/InputField";
+import TextInput from "@/components/form/TextInput";
+
+export default function LoginForm() {
+    const {errorMessage} = useContext(AlertContext);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const t = useTranslations();
+    const {lang} = useContext<LangContextProps>(LangContext)
+
+    async function handleSubmit(e: React.FormEvent): Promise<void> {
+        e.preventDefault();
+        setIsLoading(true);
+        errorMessage('');
+
+        if (email.length === 0) {
+            errorMessage(t('loginForm.error.emailRequired'));
+            setIsLoading(false);
+            return;
+        }
+        if (password.length === 0) {
+            errorMessage(t('loginForm.error.passwordRequired'));
+            setIsLoading(false);
+            return;
+        }
+        if (email.length < 3) {
+            errorMessage(t('loginForm.error.emailLength'));
+            setIsLoading(false);
+            return;
+        }
+
+        if (verifyInput(email) || verifyInput(password)) {
+            errorMessage(t('loginForm.error.emailInvalidChars'));
+            setIsLoading(false);
+            return;
+        }
+        try {
+            const response: string = await apiPostPublic<string>('login', {
+                email: email,
+                password: password,
+            }, lang)
+            if (!response) {
+                errorMessage(t('loginForm.error.connection'));
+                setIsLoading(false);
+                return;
+            }
+            await tauri.setToken(response);
+            await tauri.loginSuccess();
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(t('loginForm.error.server'));
+            } else {
+                errorMessage(t('loginForm.error.unknown'));
+            }
+        } finally {
+            setIsLoading(false);
+        }
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="space-y-5">
+            <InputField icon={Mail} fieldName={t('loginForm.fields.email.label')} input={
+                <TextInput
+                    value={email}
+                    setValue={(e) => setEmail(e.target.value)}
+                    placeholder={t('loginForm.fields.email.placeholder')}
+                    size="lg"
+                />
+            }/>
+
+            <div>
+                <div className="flex justify-between items-center mb-2">
+                    <h3 className="text-text-secondary text-sm font-medium flex items-center gap-2">
+                        <Lock className="text-primary w-5 h-5" strokeWidth={1.75}/>
+                        {t('loginForm.fields.password.label')}
+                    </h3>
+                    <a href="/login/reset-password" className="text-xs text-primary hover:underline">
+                        {t('loginForm.fields.password.forgot')}
+                    </a>
+                </div>
+                <input
+                    type="password"
+                    placeholder={t('loginForm.fields.password.placeholder')}
+                    className="input-base px-5 py-3 text-base rounded-xl"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                />
+            </div>
+
+            <Button variant="primary" fullWidth size="lg" type="submit" isLoading={isLoading}>
+                {t('loginForm.submit')}
+            </Button>
+        </form>
+    )
+}
diff --git a/app/login/login/SocialForm.tsx b/app/login/login/SocialForm.tsx
index 1e78be5..331cfbb 100755
--- a/app/login/login/SocialForm.tsx
+++ b/app/login/login/SocialForm.tsx
@@ -1,124 +1,140 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faApple, faFacebookF, faGoogle} from "@fortawesome/free-brands-svg-icons";
-import React, {useContext, useEffect} from "react";
-import System from "@/lib/models/System";
-import {AlertContext} from "@/context/AlertContext";
-import {configs} from "@/lib/configs";
-import {useTranslations} from "next-intl";
-import {LangContext, LangContextProps} from "@/context/LangContext";
-import * as tauri from '@/lib/tauri';
-
-export default function SocialForm() {
-    const {errorMessage} = useContext(AlertContext);
-    const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext)
-
-    useEffect((): void => {
-        const params = new URLSearchParams(window.location.search);
-        const provider: string | null = params.get('provider');
-        if (!provider) return;
-
-        const code: string | null = params.get('code');
-        if (!code) return;
-
-        if (provider === 'google') {
-            handleGoogleLogin(code).then();
-            return;
-        }
-        if (provider === 'facebook') {
-            const state: string | null = params.get('state');
-            if (!state) return;
-            handleFacebookLogin(code, state).then();
-            return;
-        }
-        if (provider === 'apple') {
-            const state: string | null = params.get('state');
-            if (!state) return;
-            handleAppleLogin(code, state).then();
-            return;
-        }
-    }, []);
-    
-    async function handleLoginSuccess(token: string): Promise<void> {
-        await tauri.setToken(token);
-        await tauri.loginSuccess();
-    }
-
-    async function handleFacebookLogin(code: string, state: string): Promise<void> {
-        if (code && state) {
-            const response: string = await System.postToServer<string>(`auth/facebook`, {
-                code: code,
-                state: state,
-            }, lang);
-            if (!response) {
-                errorMessage(t('socialForm.error.connection'));
-                return;
-            }
-            await handleLoginSuccess(response);
-        }
-    }
-
-    async function handleGoogleLogin(code: string): Promise<void> {
-        if (code) {
-            const response: string = await System.postToServer<string>(`auth/google`, {
-                code: code,
-            }, lang);
-            if (!response) {
-                errorMessage(t('socialForm.error.connection'));
-                return;
-            }
-            await handleLoginSuccess(response);
-        }
-    }
-
-    async function handleAppleLogin(code: string, state: string): Promise<void> {
-        if (code && state) {
-            const response: string = await System.postToServer<string>(`auth/apple`, {
-                code: code,
-                state: state,
-            }, lang);
-            if (!response) {
-                errorMessage(t('socialForm.error.connection'));
-                return;
-            }
-            await handleLoginSuccess(response);
-        }
-    }
-    
-    async function handleOAuthClick(provider: 'google' | 'facebook' | 'apple'): Promise<void> {
-        try {
-            const oauthUrl = `${configs.baseUrl}auth/${provider}/desktop`;
-            await tauri.openExternal(oauthUrl);
-        } catch {
-            errorMessage(t('socialForm.error.connection'));
-        }
-    }
-
-    return (
-        <div className="flex justify-center gap-3">
-            <button
-                onClick={() => handleOAuthClick('facebook')}
-                className="flex items-center justify-center w-14 h-14 bg-[#1877F2] hover:bg-opacity-90 text-textPrimary rounded-xl transition-colors cursor-pointer"
-                aria-label="Login with Facebook"
-            >
-                <FontAwesomeIcon icon={faFacebookF} className="w-6 h-6 text-textPrimary"/>
-            </button>
-
-            <button
-                onClick={() => handleOAuthClick('google')}
-                className="flex items-center justify-center w-14 h-14 bg-white hover:bg-opacity-90 text-[#4285F4] rounded-xl transition-colors cursor-pointer"
-                aria-label="Login with Google"
-            >
-                <FontAwesomeIcon icon={faGoogle} className="w-6 h-6 text-[#4285F4]"/>
-            </button>
-
-            <button
-                onClick={() => handleOAuthClick('apple')}
-                className="flex items-center justify-center w-14 h-14 bg-black hover:bg-opacity-90 text-white rounded-xl transition-colors cursor-pointer"
-                aria-label="Login with Apple"
-            >
-                <FontAwesomeIcon icon={faApple} className="w-6 h-6 text-white"/>
-            </button>
-        </div>
-    )
-}
+import React, {useContext, useEffect} from "react";
+import {AlertContext} from "@/context/AlertContext";
+import {configs} from "@/lib/configs";
+import {useTranslations} from "@/lib/i18n";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+import * as tauri from '@/lib/tauri';
+import {apiPostPublic} from "@/lib/api/client";
+
+const FacebookIcon = () => (
+    <svg className="w-6 h-6" viewBox="0 0 320 512" fill="currentColor">
+        <path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4.4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/>
+    </svg>
+);
+
+const GoogleIcon = () => (
+    <svg className="w-6 h-6" viewBox="0 0 488 512" fill="currentColor">
+        <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/>
+    </svg>
+);
+
+const AppleIcon = () => (
+    <svg className="w-6 h-6" viewBox="0 0 384 512" fill="currentColor">
+        <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
+    </svg>
+);
+
+export default function SocialForm() {
+    const {errorMessage} = useContext(AlertContext);
+    const t = useTranslations();
+    const {lang} = useContext<LangContextProps>(LangContext)
+
+    useEffect((): void => {
+        const params = new URLSearchParams(window.location.search);
+        const provider: string | null = params.get('provider');
+        if (!provider) return;
+
+        const code: string | null = params.get('code');
+        if (!code) return;
+
+        if (provider === 'google') {
+            handleGoogleLogin(code).then();
+            return;
+        }
+        if (provider === 'facebook') {
+            const state: string | null = params.get('state');
+            if (!state) return;
+            handleFacebookLogin(code, state).then();
+            return;
+        }
+        if (provider === 'apple') {
+            const state: string | null = params.get('state');
+            if (!state) return;
+            handleAppleLogin(code, state).then();
+            return;
+        }
+    }, []);
+
+    async function handleLoginSuccess(token: string): Promise<void> {
+        await tauri.setToken(token);
+        await tauri.loginSuccess();
+    }
+
+    async function handleFacebookLogin(code: string, state: string): Promise<void> {
+        if (code && state) {
+            const response: string = await apiPostPublic<string>(`auth/facebook`, {
+                code: code,
+                state: state,
+            }, lang);
+            if (!response) {
+                errorMessage(t('socialForm.error.connection'));
+                return;
+            }
+            await handleLoginSuccess(response);
+        }
+    }
+
+    async function handleGoogleLogin(code: string): Promise<void> {
+        if (code) {
+            const response: string = await apiPostPublic<string>(`auth/google`, {
+                code: code,
+            }, lang);
+            if (!response) {
+                errorMessage(t('socialForm.error.connection'));
+                return;
+            }
+            await handleLoginSuccess(response);
+        }
+    }
+
+    async function handleAppleLogin(code: string, state: string): Promise<void> {
+        if (code && state) {
+            const response: string = await apiPostPublic<string>(`auth/apple`, {
+                code: code,
+                state: state,
+            }, lang);
+            if (!response) {
+                errorMessage(t('socialForm.error.connection'));
+                return;
+            }
+            await handleLoginSuccess(response);
+        }
+    }
+
+    async function handleOAuthClick(provider: 'google' | 'facebook' | 'apple'): Promise<void> {
+        try {
+            const oauthUrl = `${configs.baseUrl}auth/${provider}/desktop`;
+            await tauri.openExternal(oauthUrl);
+        } catch {
+            errorMessage(t('socialForm.error.connection'));
+        }
+    }
+
+    return (
+        <div className="flex justify-center gap-3">
+            <button
+                onClick={() => handleOAuthClick('facebook')}
+                className="flex items-center justify-center w-14 h-14 bg-[#1877F2] hover:bg-opacity-90 text-text-primary rounded-xl transition-colors cursor-pointer"
+                aria-label="Login with Facebook"
+            >
+                <FacebookIcon/>
+            </button>
+
+            <button
+                onClick={() => handleOAuthClick('google')}
+                className="flex items-center justify-center w-14 h-14 bg-white hover:bg-opacity-90 text-[#4285F4] rounded-xl transition-colors cursor-pointer"
+                aria-label="Login with Google"
+            >
+                <GoogleIcon/>
+            </button>
+
+            <button
+                onClick={() => handleOAuthClick('apple')}
+                className="flex items-center justify-center w-14 h-14 bg-black hover:bg-opacity-90 text-white rounded-xl transition-colors cursor-pointer"
+                aria-label="Login with Apple"
+            >
+                <AppleIcon/>
+            </button>
+        </div>
+    )
+}
diff --git a/app/login/login/page.tsx b/app/login/login/page.tsx
index f12c149..2b49041 100755
--- a/app/login/login/page.tsx
+++ b/app/login/login/page.tsx
@@ -1,172 +1,214 @@
-'use client'
-import {useContext, useEffect, useState} from 'react';
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faEnvelope, faWifi, faCloudArrowUp} from "@fortawesome/free-solid-svg-icons";
-import LoginForm from "@/app/login/login/LoginForm";
-import SocialForm from "@/app/login/login/SocialForm";
-import {useTranslations} from "next-intl";
-import {LangContext} from "@/context/LangContext";
-import System from "@/lib/models/System";
-import * as tauri from '@/lib/tauri';
-
-export default function LoginPage() {
-    const t = useTranslations();
-    const {lang, setLang} = useContext(LangContext);
-    const [showOfflineWarning, setShowOfflineWarning] = useState(false);
-    const [isOnline, setIsOnline] = useState(true);
-    const [resetDone, setResetDone] = useState(false);
-
-    const isDev = process.env.NODE_ENV === 'development';
-
-    const handleDevReset = async () => {
-        try {
-            await tauri.devResetAll();
-            setResetDone(true);
-        } catch (error) {
-            console.error('[DevReset]', error);
-        }
-    };
-
-    const toggleLanguage = () => {
-        const newLang = lang === 'fr' ? 'en' : 'fr';
-        setLang(newLang);
-        System.setCookie('lang', newLang, 365);
-    };
-
-    useEffect(() => {
-        async function checkFirstConnectionAndNetwork() {
-            try {
-                const token = await tauri.getToken();
-                const hasToken = !!token;
-                const online = navigator.onLine;
-                setIsOnline(online);
-
-                if (!hasToken && !online) {
-                    setShowOfflineWarning(true);
-                }
-            } catch (error) {
-                console.error('Error checking first connection:', error);
-            }
-        }
-
-        checkFirstConnectionAndNetwork();
-
-        const handleOnline = () => {
-            setIsOnline(true);
-            setShowOfflineWarning(false);
-        };
-        const handleOffline = async () => {
-            setIsOnline(false);
-            try {
-                const token = await tauri.getToken();
-                if (!token) {
-                    setShowOfflineWarning(true);
-                }
-            } catch {
-                setShowOfflineWarning(true);
-            }
-        };
-
-        window.addEventListener('online', handleOnline);
-        window.addEventListener('offline', handleOffline);
-
-        return () => {
-            window.removeEventListener('online', handleOnline);
-            window.removeEventListener('offline', handleOffline);
-        };
-    }, []);
-
-    return (
-        <main className="flex min-h-screen flex-col items-center justify-center bg-background text-textPrimary p-4">
-            <div className="w-full max-w-md px-4 py-10">
-                <div className="flex justify-center mb-8">
-                    <div className="w-[90%] max-w-[320px] relative">
-                        <img
-                            src="/logo.png"
-                            alt="ERitors"
-                            className="object-contain"
-                            style={{width: 320, height: 107}}
-                        />
-                    </div>
-                </div>
-
-                {/* Offline warning notification */}
-                {showOfflineWarning && (
-                    <div className="mb-6 bg-gradient-to-r from-orange-500/20 to-amber-500/20 border border-orange-500/40 rounded-xl p-4 shadow-lg shadow-orange-500/10">
-                        <div className="flex items-start gap-3">
-                            <div className="flex-shrink-0 mt-0.5">
-                                <div className="relative">
-                                    <FontAwesomeIcon icon={faWifi} className="w-5 h-5 text-orange-400" />
-                                    <div className="absolute inset-0 w-6 h-0.5 bg-orange-400 rotate-45 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
-                                </div>
-                            </div>
-                            <div className="flex-1">
-                                <h3 className="font-semibold text-orange-200 mb-1 flex items-center gap-2">
-                                    <FontAwesomeIcon icon={faCloudArrowUp} className="w-4 h-4" />
-                                    {t('loginPage.offlineWarning.title')}
-                                </h3>
-                                <p className="text-sm text-orange-300/90 leading-relaxed">
-                                    {t('loginPage.offlineWarning.message')}
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                )}
-
-                <div
-                    className="bg-tertiary rounded-2xl overflow-hidden shadow-xl shadow-primary/10 w-full relative">
-                    <button
-                        onClick={toggleLanguage}
-                        className="absolute right-4 top-4 z-10 flex items-center gap-2 px-3 py-2 bg-secondary border border-gray-dark rounded-lg hover:bg-tertiary transition-colors"
-                        aria-label="Toggle language"
-                    >
-                        <span
-                            className={`text-sm font-medium ${lang === 'fr' ? 'text-primary' : 'text-muted'}`}>FR</span>
-                        <span className="text-muted">/</span>
-                        <span
-                            className={`text-sm font-medium ${lang === 'en' ? 'text-primary' : 'text-muted'}`}>EN</span>
-                    </button>
-                    <div
-                        className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-primary to-info pointer-events-none"></div>
-                    <div
-                        className="absolute -top-10 -left-10 w-40 h-40 bg-gradient-to-br from-primary/20 to-transparent rounded-full blur-xl pointer-events-none"></div>
-                    <div
-                        className="absolute -bottom-10 -right-10 w-40 h-40 bg-gradient-to-br from-info/20 to-transparent rounded-full blur-xl pointer-events-none"></div>
-                    
-                    <div className="p-6 sm:p-8">
-                        <div className="text-center mb-8">
-                            <h1 className="text-2xl sm:text-3xl font-bold mb-2 font-['ADLaM Display']">{t('loginPage.title')}</h1>
-                            <p className="text-muted">{t('loginPage.welcome')}</p>
-                        </div>
-                        <LoginForm/>
-                        <div className="relative my-6">
-                            <div className="absolute inset-0 flex items-center">
-                                <div className="w-full border-t border-gray-dark"></div>
-                            </div>
-                            <div className="relative flex justify-center">
-                                <span className="px-3 bg-tertiary text-muted text-sm">{t('loginPage.orSocial')}</span>
-                            </div>
-                        </div>
-                        <div className="flex justify-center gap-3 mb-6">
-                            <a
-                                href="/login/register"
-                                className="flex items-center justify-center w-14 h-14 bg-gradient-to-r from-primary to-info hover:shadow-lg hover:shadow-primary/20 text-textPrimary rounded-xl transition-all"
-                                aria-label="Register with email"
-                            >
-                                <FontAwesomeIcon icon={faEnvelope} className="w-6 h-6 text-textPrimary"/>
-                            </a>
-                            <SocialForm/>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            {isDev && (
-                resetDone
-                    ? <span className="mt-6 text-xs text-green-400">Reset OK</span>
-                    : <button onClick={handleDevReset} className="mt-6 px-4 py-2 text-xs text-red-400 border border-red-400/30 rounded-lg hover:bg-red-400/10 transition-colors">
-                        DEV: Reset All Data
-                    </button>
-            )}
-        </main>
-    );
-}
\ No newline at end of file
+'use client'
+import {useContext, useEffect, useState} from 'react';
+import {Mail, Lock, Wifi, CloudUpload, Globe} from "lucide-react";
+import SocialForm from "@/app/login/login/SocialForm";
+import {useTranslations} from "@/lib/i18n";
+import {AlertContext} from "@/context/AlertContext";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+import {setCookie} from "@/lib/utils/cookies";
+import {verifyInput} from "@/lib/utils/validation";
+import {apiPostPublic} from "@/lib/api/client";
+import * as tauri from '@/lib/tauri';
+import Button from "@/components/ui/Button";
+import InputField from "@/components/form/InputField";
+import TextInput from "@/components/form/TextInput";
+import ToggleGroup from "@/components/ui/ToggleGroup";
+
+export default function LoginPage() {
+    const t = useTranslations();
+    const {errorMessage} = useContext(AlertContext);
+    const {lang, setLang} = useContext<LangContextProps>(LangContext);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [showOfflineWarning, setShowOfflineWarning] = useState(false);
+    const [resetDone, setResetDone] = useState(false);
+
+    const isDev = process.env.NODE_ENV === 'development';
+
+    useEffect(() => {
+        async function checkFirstConnectionAndNetwork() {
+            try {
+                const token = await tauri.getToken();
+                const online = navigator.onLine;
+                if (!token && !online) {
+                    setShowOfflineWarning(true);
+                }
+            } catch (error) {
+                console.error('Error checking first connection:', error);
+            }
+        }
+
+        checkFirstConnectionAndNetwork();
+
+        const handleOnline = () => setShowOfflineWarning(false);
+        const handleOffline = async () => {
+            try {
+                const token = await tauri.getToken();
+                if (!token) setShowOfflineWarning(true);
+            } catch {
+                setShowOfflineWarning(true);
+            }
+        };
+
+        window.addEventListener('online', handleOnline);
+        window.addEventListener('offline', handleOffline);
+        return () => {
+            window.removeEventListener('online', handleOnline);
+            window.removeEventListener('offline', handleOffline);
+        };
+    }, []);
+
+    async function handleSubmit(e: React.FormEvent): Promise<void> {
+        e.preventDefault();
+        setIsLoading(true);
+        errorMessage('');
+
+        if (email.length === 0) {
+            errorMessage(t('loginForm.error.emailRequired'));
+            setIsLoading(false);
+            return;
+        }
+        if (password.length === 0) {
+            errorMessage(t('loginForm.error.passwordRequired'));
+            setIsLoading(false);
+            return;
+        }
+        if (email.length < 3) {
+            errorMessage(t('loginForm.error.emailLength'));
+            setIsLoading(false);
+            return;
+        }
+        if (verifyInput(email) || verifyInput(password)) {
+            errorMessage(t('loginForm.error.emailInvalidChars'));
+            setIsLoading(false);
+            return;
+        }
+
+        try {
+            const response: string = await apiPostPublic<string>('login', {
+                email: email,
+                password: password,
+            }, lang);
+            if (!response) {
+                errorMessage(t('loginForm.error.connection'));
+                setIsLoading(false);
+                return;
+            }
+            await tauri.setToken(response);
+            await tauri.loginSuccess();
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(t('loginForm.error.server'));
+            } else {
+                errorMessage(t('loginForm.error.unknown'));
+            }
+        } finally {
+            setIsLoading(false);
+        }
+    }
+
+    return (
+        <main className="flex min-h-screen flex-col items-center justify-center bg-tertiary text-text-primary p-4 font-['Lora']">
+            <div className="w-full max-w-md px-4 py-10">
+                <div className="flex justify-center mb-8">
+                    <img src="/logo.png" alt="ERitors" className="object-contain" style={{width: 320, height: 107}}/>
+                </div>
+
+                {showOfflineWarning && (
+                    <div className="mb-6 bg-warning/10 border border-warning/30 rounded-xl p-4">
+                        <div className="flex items-start gap-3">
+                            <Wifi className="w-5 h-5 text-warning mt-0.5" strokeWidth={1.75}/>
+                            <div>
+                                <h3 className="font-semibold text-warning mb-1 flex items-center gap-2">
+                                    <CloudUpload className="w-4 h-4" strokeWidth={1.75}/>
+                                    {t('loginPage.offlineWarning.title')}
+                                </h3>
+                                <p className="text-sm text-muted leading-relaxed">
+                                    {t('loginPage.offlineWarning.message')}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                <div className="text-center mb-6">
+                    <h1 className="text-2xl sm:text-3xl font-bold mb-2 font-['ADLaM_Display']">{t('loginPage.title')}</h1>
+                    <p className="text-muted">{t('loginPage.welcome')}</p>
+                </div>
+
+                <form onSubmit={handleSubmit}>
+                    <div className="bg-darkest-background rounded-xl p-5 space-y-5">
+                        <div className="flex justify-end">
+                            <ToggleGroup
+                                options={[{value: 'fr', label: 'FR'}, {value: 'en', label: 'EN'}]}
+                                value={lang}
+                                onChange={(value: string) => {
+                                    setLang(value as 'fr' | 'en');
+                                    setCookie('lang', value, 365);
+                                }}
+                                icon={Globe}
+                                size="sm"
+                            />
+                        </div>
+                        <InputField icon={Mail} fieldName={t('loginForm.fields.email.label')} input={
+                            <TextInput value={email} setValue={(e) => setEmail(e.target.value)}
+                                       placeholder={t('loginForm.fields.email.placeholder')} size="lg"/>
+                        }/>
+                        <div>
+                            <div className="flex justify-between items-center mb-2">
+                                <h3 className="text-text-secondary text-sm font-medium flex items-center gap-2">
+                                    <Lock className="text-primary w-5 h-5" strokeWidth={1.75}/>
+                                    {t('loginForm.fields.password.label')}
+                                </h3>
+                                <a href="/login/reset-password" className="text-xs text-primary hover:underline">
+                                    {t('loginForm.fields.password.forgot')}
+                                </a>
+                            </div>
+                            <input
+                                type="password"
+                                placeholder={t('loginForm.fields.password.placeholder')}
+                                className="input-base px-5 py-3 text-base rounded-xl"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                required
+                            />
+                        </div>
+                    </div>
+
+                    <div className="mt-4">
+                        <Button variant="primary" fullWidth size="lg" type="submit" isLoading={isLoading}>
+                            {t('loginForm.submit')}
+                        </Button>
+                    </div>
+                </form>
+
+                <div className="relative my-6">
+                    <div className="absolute inset-0 flex items-center">
+                        <div className="w-full border-t border-secondary"></div>
+                    </div>
+                    <div className="relative flex justify-center">
+                        <span className="px-3 bg-tertiary text-muted text-sm">{t('loginPage.orSocial')}</span>
+                    </div>
+                </div>
+
+                <div className="flex justify-center gap-3 mb-6">
+                    <a href="/login/register"
+                       className="flex items-center justify-center w-14 h-14 bg-primary-dark hover:bg-primary text-text-primary rounded-xl transition-colors duration-200">
+                        <Mail className="w-6 h-6" strokeWidth={1.75}/>
+                    </a>
+                    <SocialForm/>
+                </div>
+            </div>
+
+            {isDev && (
+                resetDone
+                    ? <span className="mt-6 text-xs text-success">Reset OK</span>
+                    : <button onClick={async () => { await tauri.devResetAll(); setResetDone(true); }}
+                              className="mt-6 px-4 py-2 text-xs text-error border border-error/30 rounded-lg hover:bg-error/10 transition-colors">
+                        DEV: Reset All Data
+                    </button>
+            )}
+        </main>
+    );
+}
diff --git a/app/login/offline/page.tsx b/app/login/offline/page.tsx
index 9edba72..024a47a 100644
--- a/app/login/offline/page.tsx
+++ b/app/login/offline/page.tsx
@@ -1,79 +1,67 @@
-'use client';
-
-import { useEffect } from 'react';
-import OfflinePinVerify from '@/components/offline/OfflinePinVerify';
-import { useTranslations } from 'next-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faWifi, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
-import * as tauri from '@/lib/tauri';
-
-export default function OfflineLoginPage() {
-    const t = useTranslations();
-
-    async function handlePinSuccess(userId: string): Promise<void> {
-        try {
-            const encryptionKey = await tauri.getUserEncryptionKey(userId);
-            if (encryptionKey) {
-                await tauri.dbInitialize(userId, encryptionKey);
-                await tauri.loginSuccess();
-            }
-        } catch (error) {
-            console.error('[OfflineLogin] Error initializing database:', error);
-        }
-    }
-
-    function handleBackToOnline(): void {
-        tauri.logout();
-    }
-
-    useEffect((): void => {
-        async function checkOfflineCapability() {
-            const offlineStatus = await tauri.offlineModeGet();
-            if (!offlineStatus.hasPin) {
-                window.location.href = '/login/login';
-            }
-        }
-
-        checkOfflineCapability().then();
-    }, []);
-
-    return (
-        <main className="flex min-h-screen flex-col items-center justify-center bg-background text-textPrimary">
-            <div className="w-full max-w-md px-4">
-                {/* Offline indicator */}
-                <div className="mb-6 flex items-center justify-center">
-                    <div className="px-4 py-2 bg-warning/10 border border-warning/30 rounded-full flex items-center gap-2">
-                        <FontAwesomeIcon icon={faWifi} className="w-4 h-4 text-warning" />
-                        <span className="text-sm text-warning font-medium">{t('offline.mode.title')}</span>
-                    </div>
-                </div>
-
-                {/* Logo */}
-                <div className="flex justify-center mb-8">
-                    <img
-                        src="/logo.png"
-                        alt="ERitors"
-                        className="object-contain w-full max-w-[240px] h-[80px]"
-                    />
-                </div>
-
-                {/* PIN Verify Component */}
-                <OfflinePinVerify
-                    onSuccess={handlePinSuccess}
-                    onCancel={handleBackToOnline}
-                />
-
-                {/* Back to online link */}
-                <div className="mt-6 text-center">
-                    <button
-                        onClick={handleBackToOnline}
-                        className="text-sm text-muted hover:text-textPrimary transition-colors inline-flex items-center gap-2"
-                    >
-                        <FontAwesomeIcon icon={faArrowLeft} className="w-3 h-3" />
-                        {t('offline.mode.backToOnline')}
-                    </button>
-                </div>
-            </div>
-        </main>
-    );
-}
\ No newline at end of file
+'use client';
+
+import {useEffect} from 'react';
+import OfflinePinVerify from '@/components/offline/OfflinePinVerify';
+import {useTranslations} from '@/lib/i18n';
+import {Wifi, ArrowLeft} from 'lucide-react';
+import Button from '@/components/ui/Button';
+import * as tauri from '@/lib/tauri';
+
+export default function OfflineLoginPage() {
+    const t = useTranslations();
+
+    async function handlePinSuccess(userId: string): Promise<void> {
+        try {
+            const encryptionKey = await tauri.getUserEncryptionKey(userId);
+            if (encryptionKey) {
+                await tauri.dbInitialize(userId, encryptionKey);
+                await tauri.loginSuccess();
+            }
+        } catch (error) {
+            console.error('[OfflineLogin] Error initializing database:', error);
+        }
+    }
+
+    function handleBackToOnline(): void {
+        tauri.logout();
+    }
+
+    useEffect((): void => {
+        async function checkOfflineCapability() {
+            const offlineStatus = await tauri.offlineModeGet();
+            if (!offlineStatus.hasPin) {
+                window.location.href = '/login/login';
+            }
+        }
+
+        checkOfflineCapability().then();
+    }, []);
+
+    return (
+        <main className="flex min-h-screen flex-col items-center justify-center bg-tertiary text-text-primary p-4 font-['Lora']">
+            <div className="w-full max-w-md px-4 py-10">
+                <div className="flex justify-center mb-8">
+                    <img src="/logo.png" alt="ERitors" className="object-contain" style={{width: 320, height: 107}}/>
+                </div>
+
+                <div className="text-center mb-6">
+                    <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-warning/10 border border-warning/30 rounded-full mb-3">
+                        <Wifi className="w-4 h-4 text-warning" strokeWidth={1.75}/>
+                        <span className="text-sm text-warning font-medium">{t('offline.mode.title')}</span>
+                    </div>
+                </div>
+
+                <div className="bg-darkest-background rounded-xl p-5 mb-4">
+                    <OfflinePinVerify
+                        onSuccess={handlePinSuccess}
+                        onCancel={handleBackToOnline}
+                    />
+                </div>
+
+                <Button variant="ghost" fullWidth icon={ArrowLeft} onClick={handleBackToOnline}>
+                    {t('offline.mode.backToOnline')}
+                </Button>
+            </div>
+        </main>
+    );
+}
diff --git a/app/login/register/StepOne.tsx b/app/login/register/StepOne.tsx
index 9ed0dbc..837d5e3 100755
--- a/app/login/register/StepOne.tsx
+++ b/app/login/register/StepOne.tsx
@@ -1,205 +1,147 @@
-import React, {Dispatch, SetStateAction, useContext, useState} from "react";
-import System from "@/lib/models/System";
-import {AlertContext} from "@/context/AlertContext";
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faEnvelope, faLock, faSignature, faUser} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from "next-intl";
-import {LangContext, LangContextProps} from "@/context/LangContext";
-
-export default function StepOne(
-    {
-        username,
-        email,
-        setUsername,
-        setEmail,
-        handleNextStep
-    }: {
-        username: string;
-        email: string;
-        setUsername: Dispatch<SetStateAction<string>>,
-        setEmail: Dispatch<SetStateAction<string>>,
-        handleNextStep: Function;
-    }) {
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const [firstName, setFirstName] = useState<string>('');
-    const [lastName, setLastName] = useState<string>('');
-    const [password, setPassword] = useState<string>('');
-    const [repeatPassword, setRepeatPassword] = useState<string>('');
-    const [userId, setUserId] = useState<string>('')
-    const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext)
-    
-    async function handleStep(): Promise<void> {
-        
-        if (!firstName || !lastName || !username || !password || !repeatPassword || !email) {
-            errorMessage(t('registerStepOne.error.requiredFields'));
-            return;
-        }
-        if (firstName.length < 2 || firstName.length > 50) {
-            errorMessage(t('registerStepOne.error.firstNameLength'));
-            return;
-        }
-        if (lastName.length < 2 || lastName.length > 50) {
-            errorMessage(t('registerStepOne.error.lastNameLength'));
-            return;
-        }
-        if (username.length < 3 || username.length > 50) {
-            errorMessage(t('registerStepOne.error.usernameLength'));
-            return;
-        }
-        if (System.verifyInput(firstName) || System.verifyInput(lastName) || System.verifyInput(username) || System.verifyInput(password) || System.verifyInput(repeatPassword) || System.verifyInput(email)) {
-            errorMessage(t('registerStepOne.error.invalidInput'));
-            return;
-        }
-        
-        if (password != repeatPassword) {
-            errorMessage(t('registerStepOne.error.passwordMismatch'));
-            return;
-        }
-        try {
-            const response: string = await System.postToServer<string>(`register/pre`, {
-                firstName,
-                lastName,
-                username,
-                email,
-                password,
-                retypePass: repeatPassword
-            }, lang);
-            if (!response) {
-                errorMessage(t('registerStepOne.error.preRegister'));
-                return;
-            }
-            setUserId(response);
-            successMessage(t('registerStepOne.success.preRegister'));
-            handleNextStep();
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t('registerStepOne.error.unknown'));
-            }
-        }
-    }
-    
-    return (
-        <form className="space-y-4">
-            <div className="mb-4">
-                <label htmlFor="firstName" className="block text-sm font-medium mb-1 text-muted">
-                    {t('registerStepOne.fields.firstName.label')}
-                </label>
-                <div className="relative">
-                    <FontAwesomeIcon icon={faSignature}
-                                     className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
-                    <input
-                        type="text"
-                        id="firstName"
-                        placeholder={t('registerStepOne.fields.firstName.placeholder')}
-                        className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
-                        value={firstName}
-                        onChange={(e) => setFirstName(e.target.value)}
-                        required
-                    />
-                </div>
-            </div>
-            <div className="mb-4">
-                <label htmlFor="lastName" className="block text-sm font-medium mb-1 text-muted">
-                    {t('registerStepOne.fields.lastName.label')}
-                </label>
-                <div className="relative">
-                    <FontAwesomeIcon icon={faSignature}
-                                     className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
-                    <input
-                        type="text"
-                        id="lastName"
-                        placeholder={t('registerStepOne.fields.lastName.placeholder')}
-                        className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
-                        value={lastName}
-                        onChange={(e) => setLastName(e.target.value)}
-                        required
-                    />
-                </div>
-            </div>
-            <div className="mb-4">
-                <label htmlFor="username" className="block text-sm font-medium mb-1 text-muted">
-                    {t('registerStepOne.fields.username.label')}
-                </label>
-                <div className="relative">
-                    <FontAwesomeIcon icon={faUser}
-                                     className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
-                    <input
-                        type="text"
-                        id="username"
-                        placeholder={t('registerStepOne.fields.username.placeholder')}
-                        className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
-                        value={username}
-                        onChange={(e) => setUsername(e.target.value)}
-                        required
-                    />
-                </div>
-                <p className="text-xs text-muted mt-1">{t('registerStepOne.fields.username.note')}</p>
-            </div>
-            <div className="mb-4">
-                <label htmlFor="email" className="block text-sm font-medium mb-1 text-muted">
-                    {t('registerStepOne.fields.email.label')}
-                </label>
-                <div className="relative">
-                    <FontAwesomeIcon icon={faEnvelope}
-                                     className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
-                    <input
-                        type="email"
-                        id="email"
-                        placeholder={t('registerStepOne.fields.email.placeholder')}
-                        className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
-                        required
-                    />
-                </div>
-            </div>
-            
-            <div className="mb-4">
-                <label htmlFor="password" className="block text-sm font-medium mb-1 text-muted">
-                    {t('registerStepOne.fields.password.label')}
-                </label>
-                <div className="relative">
-                    <FontAwesomeIcon icon={faLock}
-                                     className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
-                    <input
-                        type="password"
-                        id="password"
-                        placeholder={t('registerStepOne.fields.password.placeholder')}
-                        className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
-                        value={password}
-                        onChange={(e) => setPassword(e.target.value)}
-                        required
-                    />
-                </div>
-            </div>
-            <div className="mb-4">
-                <label htmlFor="repeatPassword" className="block text-sm font-medium mb-1 text-muted">
-                    {t('registerStepOne.fields.repeatPassword.label')}
-                </label>
-                <div className="relative">
-                    <FontAwesomeIcon icon={faLock}
-                                     className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
-                    <input
-                        type="password"
-                        id="repeatPassword"
-                        placeholder={t('registerStepOne.fields.repeatPassword.placeholder')}
-                        className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
-                        value={repeatPassword}
-                        onChange={(e) => setRepeatPassword(e.target.value)}
-                        required
-                    />
-                </div>
-            </div>
-            <button
-                type="button"
-                onClick={() => handleStep()}
-                className="w-full py-4 mt-6 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
-            >
-                {t('registerStepOne.next')}
-            </button>
-        </form>
-    )
-}
+import React, {Dispatch, SetStateAction, useContext, useState} from "react";
+import {AlertContext} from "@/context/AlertContext";
+import {Mail, Lock, PenLine, User} from 'lucide-react';
+import {useTranslations} from "@/lib/i18n";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+import {verifyInput} from "@/lib/utils/validation";
+import {apiPostPublic} from "@/lib/api/client";
+import Button from "@/components/ui/Button";
+import InputField from "@/components/form/InputField";
+import TextInput from "@/components/form/TextInput";
+
+export default function StepOne(
+    {
+        username,
+        email,
+        setUsername,
+        setEmail,
+        handleNextStep
+    }: {
+        username: string;
+        email: string;
+        setUsername: Dispatch<SetStateAction<string>>,
+        setEmail: Dispatch<SetStateAction<string>>,
+        handleNextStep: Function;
+    }) {
+    const {errorMessage, successMessage} = useContext(AlertContext);
+    const [firstName, setFirstName] = useState<string>('');
+    const [lastName, setLastName] = useState<string>('');
+    const [password, setPassword] = useState<string>('');
+    const [repeatPassword, setRepeatPassword] = useState<string>('');
+    const [userId, setUserId] = useState<string>('')
+    const t = useTranslations();
+    const {lang} = useContext<LangContextProps>(LangContext)
+
+    async function handleStep(): Promise<void> {
+
+        if (!firstName || !lastName || !username || !password || !repeatPassword || !email) {
+            errorMessage(t('registerStepOne.error.requiredFields'));
+            return;
+        }
+        if (firstName.length < 2 || firstName.length > 50) {
+            errorMessage(t('registerStepOne.error.firstNameLength'));
+            return;
+        }
+        if (lastName.length < 2 || lastName.length > 50) {
+            errorMessage(t('registerStepOne.error.lastNameLength'));
+            return;
+        }
+        if (username.length < 3 || username.length > 50) {
+            errorMessage(t('registerStepOne.error.usernameLength'));
+            return;
+        }
+        if (verifyInput(firstName) || verifyInput(lastName) || verifyInput(username) || verifyInput(password) || verifyInput(repeatPassword) || verifyInput(email)) {
+            errorMessage(t('registerStepOne.error.invalidInput'));
+            return;
+        }
+
+        if (password != repeatPassword) {
+            errorMessage(t('registerStepOne.error.passwordMismatch'));
+            return;
+        }
+        try {
+            const response: string = await apiPostPublic<string>(`register/pre`, {
+                firstName,
+                lastName,
+                username,
+                email,
+                password,
+                retypePass: repeatPassword
+            }, lang);
+            if (!response) {
+                errorMessage(t('registerStepOne.error.preRegister'));
+                return;
+            }
+            setUserId(response);
+            successMessage(t('registerStepOne.success.preRegister'));
+            handleNextStep();
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t('registerStepOne.error.unknown'));
+            }
+        }
+    }
+
+    return (
+        <form className="space-y-4">
+            <InputField icon={PenLine} fieldName={t('registerStepOne.fields.firstName.label')} input={
+                <TextInput value={firstName} setValue={(e) => setFirstName(e.target.value)}
+                           placeholder={t('registerStepOne.fields.firstName.placeholder')}/>
+            }/>
+
+            <InputField icon={PenLine} fieldName={t('registerStepOne.fields.lastName.label')} input={
+                <TextInput value={lastName} setValue={(e) => setLastName(e.target.value)}
+                           placeholder={t('registerStepOne.fields.lastName.placeholder')}/>
+            }/>
+
+            <div>
+                <InputField icon={User} fieldName={t('registerStepOne.fields.username.label')} input={
+                    <TextInput value={username} setValue={(e) => setUsername(e.target.value)}
+                               placeholder={t('registerStepOne.fields.username.placeholder')}/>
+                }/>
+                <p className="text-xs text-muted mt-1">{t('registerStepOne.fields.username.note')}</p>
+            </div>
+
+            <InputField icon={Mail} fieldName={t('registerStepOne.fields.email.label')} input={
+                <TextInput value={email} setValue={(e) => setEmail(e.target.value)}
+                           placeholder={t('registerStepOne.fields.email.placeholder')}/>
+            }/>
+
+            <div>
+                <h3 className="text-text-secondary text-sm font-medium flex items-center gap-2 mb-2">
+                    <Lock className="text-primary w-5 h-5" strokeWidth={1.75}/>
+                    {t('registerStepOne.fields.password.label')}
+                </h3>
+                <input
+                    type="password"
+                    placeholder={t('registerStepOne.fields.password.placeholder')}
+                    className="input-base"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    required
+                />
+            </div>
+
+            <div>
+                <h3 className="text-text-secondary text-sm font-medium flex items-center gap-2 mb-2">
+                    <Lock className="text-primary w-5 h-5" strokeWidth={1.75}/>
+                    {t('registerStepOne.fields.repeatPassword.label')}
+                </h3>
+                <input
+                    type="password"
+                    placeholder={t('registerStepOne.fields.repeatPassword.placeholder')}
+                    className="input-base"
+                    value={repeatPassword}
+                    onChange={(e) => setRepeatPassword(e.target.value)}
+                    required
+                />
+            </div>
+
+            <Button variant="primary" fullWidth size="lg" onClick={() => handleStep()}>
+                {t('registerStepOne.next')}
+            </Button>
+        </form>
+    )
+}
diff --git a/app/login/register/StepTree.tsx b/app/login/register/StepTree.tsx
index 2b52512..8252b8f 100755
--- a/app/login/register/StepTree.tsx
+++ b/app/login/register/StepTree.tsx
@@ -1,114 +1,91 @@
-import React, {useContext, useState} from "react";
-import Link from "next/link";
-import System from "@/lib/models/System";
-import {AlertContext} from "@/context/AlertContext";
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faKey} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from "next-intl";
-import {LangContext, LangContextProps} from "@/context/LangContext";
-
-export default function StepTree(
-    {
-        email,
-        prevStep
-    }: {
-        email: string;
-        prevStep: Function;
-    }) {
-    
-    const {errorMessage, successMessage} = useContext(AlertContext);
-
-    const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
-    const [verifyCode, setVerifyCode] = useState<string>('');
-    const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext)
-    
-    async function handleVerifyCode(): Promise<void> {
-        if (verifyCode === '') {
-            errorMessage(t('registerStepTwo.error.codeIncorrect'));
-            return;
-        }
-        try {
-            const response: boolean = await System.postToServer<boolean>('register/verify-code', {
-                verifyCode,
-                email,
-            }, lang);
-            if (!response) {
-                errorMessage(t('registerStepTwo.error.codeIncorrect'));
-                return;
-            }
-            setIsConfirmed(true);
-            successMessage(t('registerStepTwo.success.verified'));
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t('registerStepTwo.error.unknown'));
-            }
-        }
-    }
-    
-    return (
-        !isConfirmed ? (
-            <div className="space-y-6">
-                <div className="text-center mb-6">
-                    <p className="text-muted">{t('registerStepTwo.instructions.sent')}</p>
-                    <p className="text-muted text-sm mt-2">{t('registerStepTwo.instructions.checkInbox')}</p>
-                </div>
-                
-                <div className="mb-4">
-                    <label htmlFor="verifyCode" className="block text-sm font-medium mb-1 text-muted">
-                        {t('registerStepTwo.fields.code.label')}
-                    </label>
-                    <div className="relative">
-                        <FontAwesomeIcon icon={faKey}
-                                         className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
-                        <input
-                            type="text"
-                            id="verifyCode"
-                            placeholder={t('registerStepTwo.fields.code.placeholder')}
-                            className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
-                            value={verifyCode}
-                            onChange={(e) => setVerifyCode(e.target.value)}
-                            required
-                        />
-                    </div>
-                </div>
-                
-                <div className="flex flex-col space-y-3 mt-6">
-                    <button
-                        type="button"
-                        onClick={() => handleVerifyCode()}
-                        className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
-                    >
-                        {t('registerStepTwo.verify')}
-                    </button>
-                    
-                    <button
-                        type="button"
-                        onClick={() => prevStep()}
-                        className="w-full py-4 bg-secondary text-textPrimary font-semibold rounded-xl hover:bg-gray-dark transition-colors"
-                    >
-                        {t('registerStepTwo.back')}
-                    </button>
-                </div>
-            </div>
-        ) : (
-            <div className="space-y-6">
-                <div className="p-4 bg-success/20 border border-success rounded-xl">
-                    <p className="text-center text-text">{t('registerStepTwo.confirmed')}</p>
-                </div>
-                <div className="mt-6">
-                    <Link href="/login" className="block w-full">
-                        <button
-                            type="button"
-                            className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
-                        >
-                            {t('registerStepTwo.start')}
-                        </button>
-                    </Link>
-                </div>
-            </div>
-        )
-    )
-}
+import React, {useContext, useState} from "react";
+import {Link} from "@/lib/navigation";
+import {AlertContext} from "@/context/AlertContext";
+import {KeyRound} from 'lucide-react';
+import {useTranslations} from "@/lib/i18n";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+import {apiPostPublic} from "@/lib/api/client";
+import Button from "@/components/ui/Button";
+import InputField from "@/components/form/InputField";
+import TextInput from "@/components/form/TextInput";
+
+export default function StepTree(
+    {
+        email,
+        prevStep
+    }: {
+        email: string;
+        prevStep: Function;
+    }) {
+
+    const {errorMessage, successMessage} = useContext(AlertContext);
+
+    const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
+    const [verifyCode, setVerifyCode] = useState<string>('');
+    const t = useTranslations();
+    const {lang} = useContext<LangContextProps>(LangContext)
+
+    async function handleVerifyCode(): Promise<void> {
+        if (verifyCode === '') {
+            errorMessage(t('registerStepTwo.error.codeIncorrect'));
+            return;
+        }
+        try {
+            const response: boolean = await apiPostPublic<boolean>('register/verify-code', {
+                verifyCode,
+                email,
+            }, lang);
+            if (!response) {
+                errorMessage(t('registerStepTwo.error.codeIncorrect'));
+                return;
+            }
+            setIsConfirmed(true);
+            successMessage(t('registerStepTwo.success.verified'));
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t('registerStepTwo.error.unknown'));
+            }
+        }
+    }
+
+    return (
+        !isConfirmed ? (
+            <div className="space-y-6">
+                <div className="text-center mb-6">
+                    <p className="text-muted">{t('registerStepTwo.instructions.sent')}</p>
+                    <p className="text-muted text-sm mt-2">{t('registerStepTwo.instructions.checkInbox')}</p>
+                </div>
+
+                <InputField icon={KeyRound} fieldName={t('registerStepTwo.fields.code.label')} input={
+                    <TextInput value={verifyCode} setValue={(e) => setVerifyCode(e.target.value)}
+                               placeholder={t('registerStepTwo.fields.code.placeholder')}/>
+                }/>
+
+                <div className="flex flex-col space-y-3 mt-6">
+                    <Button variant="primary" fullWidth size="lg" onClick={() => handleVerifyCode()}>
+                        {t('registerStepTwo.verify')}
+                    </Button>
+
+                    <Button variant="secondary" fullWidth size="lg" onClick={() => prevStep()}>
+                        {t('registerStepTwo.back')}
+                    </Button>
+                </div>
+            </div>
+        ) : (
+            <div className="space-y-6">
+                <div className="p-4 bg-success/20 border border-success rounded-xl">
+                    <p className="text-center text-text-primary">{t('registerStepTwo.confirmed')}</p>
+                </div>
+                <div className="mt-6">
+                    <Link href="/login" className="block w-full">
+                        <Button variant="primary" fullWidth size="lg">
+                            {t('registerStepTwo.start')}
+                        </Button>
+                    </Link>
+                </div>
+            </div>
+        )
+    )
+}
diff --git a/app/login/register/page.tsx b/app/login/register/page.tsx
index 5a6d9dd..3143328 100755
--- a/app/login/register/page.tsx
+++ b/app/login/register/page.tsx
@@ -1,95 +1,202 @@
-'use client'
-import {useState} from 'react';
-import StepOne from "./StepOne";
-import StepTree from "@/app/login/register/StepTree";
-import SocialForm from "@/app/login/login/SocialForm";
-import {useTranslations} from "next-intl";
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faArrowLeft} from '@fortawesome/free-solid-svg-icons';
-
-export default function Register() {
-    const t = useTranslations();
-    const [username, setUsername] = useState<string>('');
-    const [email, setEmail] = useState<string>('');
-    const [step, setStep] = useState<number>(1);
-    
-    function handleNextStep(): void {
-        setStep(step + 1);
-    }
-    
-    function handlePrevStep(): void {
-        setStep(step - 1);
-    }
-    
-    return (
-        <main className="flex min-h-screen flex-col items-center justify-center bg-background text-textPrimary p-4">
-            <div className="w-full max-w-md px-4 py-10">
-                <div className="flex justify-center mb-8">
-                    <div className="w-[90%] max-w-[320px]">
-                        <img
-                            src="/logo.png"
-                            alt="ERitors"
-                            className="w-full h-auto object-contain"
-                        />
-                    </div>
-                </div>
-                
-                <div className="bg-tertiary rounded-2xl overflow-hidden shadow-xl shadow-primary/10 w-full relative">
-                    <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-primary to-info"></div>
-                    <div
-                        className="absolute -top-10 -left-10 w-40 h-40 bg-gradient-to-br from-primary/20 to-transparent rounded-full blur-xl"></div>
-                    <div
-                        className="absolute -bottom-10 -right-10 w-40 h-40 bg-gradient-to-br from-info/20 to-transparent rounded-full blur-xl"></div>
-                    
-                    <div className="p-6 sm:p-8">
-                        <div className="text-center mb-6">
-                            <h1 className="text-2xl sm:text-3xl font-bold mb-2 font-['ADLaM Display']">{t('registerPage.title')}</h1>
-                            <p className="text-muted">{t('registerPage.subtitle')}</p>
-                        </div>
-                        
-                        <div className="mb-8">
-                            <div className="flex items-center">
-                                <div
-                                    className={`flex-grow h-2 rounded-full ${step >= 1 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
-                                <div className="w-4"></div>
-                                <div
-                                    className={`flex-grow h-2 rounded-full ${step >= 2 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
-                            </div>
-                            <div className="flex justify-between items-center mt-2 text-xs text-muted">
-                                <span>{t('registerPage.progress.infos')}</span>
-                                <span>{t('registerPage.progress.verif')}</span>
-                            </div>
-                        </div>
-                        {
-                            step === 1 && <SocialForm/>
-                        }
-                        {
-                            step === 1 && (
-                                <>
-                                    <StepOne username={username}
-                                             email={email}
-                                             setUsername={setUsername}
-                                             setEmail={setEmail}
-                                             handleNextStep={handleNextStep}
-                                    />
-                                    <a
-                                        href="/login/login"
-                                        className="w-full py-4 mt-3 bg-secondary text-textPrimary font-semibold rounded-xl hover:bg-gray-dark transition-colors flex items-center justify-center gap-2"
-                                    >
-                                        <FontAwesomeIcon icon={faArrowLeft} className="w-4 h-4" />
-                                        {t('registerPage.backToLogin')}
-                                    </a>
-                                </>
-                            )
-                        }
-                        {
-                            step === 2 && (
-                                <StepTree email={email} prevStep={handlePrevStep}/>
-                            )
-                        }
-                    </div>
-                </div>
-            </div>
-        </main>
-    );
-}
\ No newline at end of file
+'use client'
+import {useContext, useState} from 'react';
+import {Mail, Lock, User, KeyRound, ArrowLeft} from 'lucide-react';
+import {useTranslations} from "@/lib/i18n";
+import {AlertContext} from "@/context/AlertContext";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+import {verifyInput} from "@/lib/utils/validation";
+import {apiPostPublic} from "@/lib/api/client";
+import {Link} from "@/lib/navigation";
+import Button from "@/components/ui/Button";
+import InputField from "@/components/form/InputField";
+import TextInput from "@/components/form/TextInput";
+
+export default function Register() {
+    const t = useTranslations();
+    const {errorMessage, successMessage} = useContext(AlertContext);
+    const {lang} = useContext<LangContextProps>(LangContext);
+
+    const [step, setStep] = useState<number>(1);
+    const [username, setUsername] = useState<string>('');
+    const [email, setEmail] = useState<string>('');
+    const [password, setPassword] = useState<string>('');
+    const [repeatPassword, setRepeatPassword] = useState<string>('');
+    const [verifyCode, setVerifyCode] = useState<string>('');
+    const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
+
+    async function handleStepOne(): Promise<void> {
+        if (!username || !password || !repeatPassword || !email) {
+            errorMessage(t('registerStepOne.error.requiredFields'));
+            return;
+        }
+        if (username.length < 3 || username.length > 50) {
+            errorMessage(t('registerStepOne.error.usernameLength'));
+            return;
+        }
+        if (verifyInput(username) || verifyInput(password) || verifyInput(repeatPassword) || verifyInput(email)) {
+            errorMessage(t('registerStepOne.error.invalidInput'));
+            return;
+        }
+        if (password !== repeatPassword) {
+            errorMessage(t('registerStepOne.error.passwordMismatch'));
+            return;
+        }
+        try {
+            const response: string = await apiPostPublic<string>('register/pre', {
+                username, email, password, retypePass: repeatPassword
+            }, lang);
+            if (!response) {
+                errorMessage(t('registerStepOne.error.preRegister'));
+                return;
+            }
+            successMessage(t('registerStepOne.success.preRegister'));
+            setStep(2);
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t('registerStepOne.error.unknown'));
+            }
+        }
+    }
+
+    async function handleVerifyCode(): Promise<void> {
+        if (verifyCode === '') {
+            errorMessage(t('registerStepTwo.error.codeIncorrect'));
+            return;
+        }
+        try {
+            const response: boolean = await apiPostPublic<boolean>('register/verify-code', {
+                verifyCode, email,
+            }, lang);
+            if (!response) {
+                errorMessage(t('registerStepTwo.error.codeIncorrect'));
+                return;
+            }
+            setIsConfirmed(true);
+            successMessage(t('registerStepTwo.success.verified'));
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t('registerStepTwo.error.unknown'));
+            }
+        }
+    }
+
+    return (
+        <main className="flex min-h-screen flex-col items-center justify-center bg-tertiary text-text-primary p-4 font-['Lora']">
+            <div className="w-full max-w-md px-4 py-10">
+                <div className="flex justify-center mb-8">
+                    <img src="/logo.png" alt="ERitors" className="object-contain" style={{width: 320, height: 107}}/>
+                </div>
+
+                <div className="text-center mb-6">
+                    <h1 className="text-2xl sm:text-3xl font-bold mb-2 font-['ADLaM_Display'] tracking-wide">{t('registerPage.title')}</h1>
+                    <p className="text-muted text-sm">{t('registerPage.subtitle')}</p>
+                </div>
+
+                {step === 1 && !isConfirmed && (
+                    <>
+                        <div className="overflow-hidden rounded-xl mb-4">
+                            <div className="flex items-center">
+                                <div className={`flex-grow h-2 ${step >= 1 ? 'bg-primary' : 'bg-secondary'}`}></div>
+                                <div className="w-1 bg-tertiary"></div>
+                                <div className={`flex-grow h-2 ${step >= 2 ? 'bg-primary' : 'bg-secondary'}`}></div>
+                            </div>
+                            <div className="bg-darkest-background p-5 space-y-4">
+                                <div>
+                                    <InputField icon={User} fieldName={t('registerStepOne.fields.username.label')} input={
+                                        <TextInput value={username} setValue={(e) => setUsername(e.target.value)}
+                                                   placeholder={t('registerStepOne.fields.username.placeholder')}/>
+                                    }/>
+                                    <p className="text-xs text-muted mt-1">{t('registerStepOne.fields.username.note')}</p>
+                                </div>
+                                <InputField icon={Mail} fieldName={t('registerStepOne.fields.email.label')} input={
+                                    <TextInput value={email} setValue={(e) => setEmail(e.target.value)}
+                                               placeholder={t('registerStepOne.fields.email.placeholder')}/>
+                                }/>
+                                <div>
+                                    <h3 className="text-text-secondary text-sm font-medium flex items-center gap-2 mb-2">
+                                        <Lock className="text-primary w-5 h-5" strokeWidth={1.75}/>
+                                        {t('registerStepOne.fields.password.label')}
+                                    </h3>
+                                    <input type="password" placeholder={t('registerStepOne.fields.password.placeholder')}
+                                           className="input-base" value={password}
+                                           onChange={(e) => setPassword(e.target.value)} required/>
+                                </div>
+                                <div>
+                                    <h3 className="text-text-secondary text-sm font-medium flex items-center gap-2 mb-2">
+                                        <Lock className="text-primary w-5 h-5" strokeWidth={1.75}/>
+                                        {t('registerStepOne.fields.repeatPassword.label')}
+                                    </h3>
+                                    <input type="password" placeholder={t('registerStepOne.fields.repeatPassword.placeholder')}
+                                           className="input-base" value={repeatPassword}
+                                           onChange={(e) => setRepeatPassword(e.target.value)} required/>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="space-y-3">
+                            <Button variant="primary" fullWidth size="lg" onClick={handleStepOne}>
+                                {t('registerStepOne.next')}
+                            </Button>
+                            <a href="/login/login" className="block w-full">
+                                <Button variant="secondary" fullWidth icon={ArrowLeft}>
+                                    {t('registerPage.backToLogin')}
+                                </Button>
+                            </a>
+                        </div>
+                    </>
+                )}
+
+                {step === 2 && !isConfirmed && (
+                    <>
+                        <div className="overflow-hidden rounded-xl mb-4">
+                            <div className="flex items-center">
+                                <div className="flex-grow h-2 bg-primary"></div>
+                                <div className="w-1 bg-tertiary"></div>
+                                <div className="flex-grow h-2 bg-primary"></div>
+                            </div>
+                            <div className="bg-darkest-background p-5 space-y-4">
+                                <div className="text-center">
+                                    <p className="text-muted">{t('registerStepTwo.instructions.sent')}</p>
+                                    <p className="text-muted text-sm mt-2">{t('registerStepTwo.instructions.checkInbox')}</p>
+                                </div>
+                                <InputField icon={KeyRound} fieldName={t('registerStepTwo.fields.code.label')} input={
+                                    <TextInput value={verifyCode} setValue={(e) => setVerifyCode(e.target.value)}
+                                               placeholder={t('registerStepTwo.fields.code.placeholder')}/>
+                                }/>
+                            </div>
+                        </div>
+
+                        <div className="space-y-3">
+                            <Button variant="primary" fullWidth size="lg" onClick={handleVerifyCode}>
+                                {t('registerStepTwo.verify')}
+                            </Button>
+                            <Button variant="secondary" fullWidth onClick={() => setStep(1)}>
+                                {t('registerStepTwo.back')}
+                            </Button>
+                        </div>
+                    </>
+                )}
+
+                {isConfirmed && (
+                    <>
+                        <div className="bg-darkest-background rounded-xl p-5 mb-4">
+                            <div className="p-4 bg-success/20 border border-success rounded-xl">
+                                <p className="text-center text-text-primary">{t('registerStepTwo.confirmed')}</p>
+                            </div>
+                        </div>
+
+                        <Link href="/login" className="block w-full">
+                            <Button variant="primary" fullWidth size="lg">
+                                {t('registerStepTwo.start')}
+                            </Button>
+                        </Link>
+                    </>
+                )}
+            </div>
+        </main>
+    );
+}
diff --git a/app/login/reset-password/page.tsx b/app/login/reset-password/page.tsx
index 33ba747..e45a642 100755
--- a/app/login/reset-password/page.tsx
+++ b/app/login/reset-password/page.tsx
@@ -1,277 +1,190 @@
-'use client'
-import {useContext, useState} from "react";
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faEnvelope, faKey, faLock, faArrowLeft} from '@fortawesome/free-solid-svg-icons';
-import System from "@/lib/models/System";
-import {QueryDataResponse} from "@/shared/interface";
-import {AlertContext} from "@/context/AlertContext";
-import {useTranslations} from "next-intl";
-import {LangContext, LangContextProps} from "@/context/LangContext";
-
-export default function ForgetPasswordPage() {
-    const [step, setStep] = useState(1);
-    const [email, setEmail] = useState('');
-    const [verificationCode, setVerificationCode] = useState('');
-    const [isConfirmed, setIsConfirmed] = useState(false);
-    const [newPassword, setNewPassword] = useState<string>('');
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext)
-
-    function handleNextStep(): void {
-        setStep(step + 1);
-    }
-
-    function handlePrevStep(): void {
-        setStep(step - 1);
-    }
-    
-    async function handleConfirm() {
-        try {
-            const response: QueryDataResponse<null> = await System.postToServer<QueryDataResponse<null>>('user/verify-code', {
-                verifyCode: verificationCode,
-                email,
-            }, lang);
-            if (response.valid) {
-                successMessage(response.message ?? '');
-                setIsConfirmed(true);
-            } else {
-                errorMessage(response.message ?? '');
-            }
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(t('resetPassword.error.codeServer'));
-            } else {
-                errorMessage(t('resetPassword.error.codeUnknown'));
-            }
-        }
-    }
-    
-    async function handleEmailCheck(): Promise<void> {
-        if (email == null || email == "") {
-            errorMessage(t('resetPassword.error.emailInvalid'));
-            return;
-        }
-        
-        const emailRegEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        
-        if (!emailRegEx.test(email)) {
-            errorMessage(t('resetPassword.error.emailFormat'));
-            return;
-        }
-        
-        try {
-            const response: QueryDataResponse<null> = await System.postToServer<QueryDataResponse<null>>('user/email-check', {
-                email: email
-            }, lang);
-            if (response.valid) {
-                successMessage(response.message ?? '');
-                handleNextStep();
-            } else {
-                errorMessage(response.message ?? '');
-            }
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(t('resetPassword.error.emailServer'));
-            } else {
-                errorMessage(t('resetPassword.error.emailUnknown'));
-            }
-        }
-    }
-    
-    async function handleNewPassword(): Promise<void> {
-        try {
-            const response: QueryDataResponse<null> = await System.postToServer('password/reset', {
-                email: email,
-                newPassword: newPassword,
-                code: verificationCode
-            }, lang);
-            if (response.valid) {
-                successMessage(response.message ?? '');
-                handleNextStep();
-            } else {
-                errorMessage(response.message ?? '');
-            }
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(t('resetPassword.error.passwordServer'));
-            } else {
-                errorMessage(t('resetPassword.error.passwordUnknown'));
-            }
-        }
-    }
-    
-    return (
-        <main className="flex min-h-screen flex-col items-center justify-center bg-background text-textPrimary p-4">
-            <div className="w-full max-w-md px-4 py-10">
-                <div className="flex justify-center mb-8">
-                    <div className="w-[90%] max-w-[320px]">
-                        <img
-                            src="/logo.png"
-                            alt="ERitors"
-                            className="w-full h-auto object-contain"
-                        />
-                    </div>
-                </div>
-                <div className="bg-tertiary rounded-2xl overflow-hidden shadow-xl shadow-primary/10 w-full relative">
-                    <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-primary to-info"></div>
-                    <div
-                        className="absolute -top-10 -left-10 w-40 h-40 bg-gradient-to-br from-primary/20 to-transparent rounded-full blur-xl"></div>
-                    <div
-                        className="absolute -bottom-10 -right-10 w-40 h-40 bg-gradient-to-br from-info/20 to-transparent rounded-full blur-xl"></div>
-                    
-                    <div className="p-6 sm:p-8">
-                        <div className="text-center mb-6">
-                            <h1 className="text-2xl sm:text-3xl font-bold mb-2 font-['ADLaM Display']">{t('resetPassword.title')}</h1>
-                            <p className="text-muted">{t('resetPassword.subtitle')}</p>
-                        </div>
-                        
-                        <div className="mb-8">
-                            <div className="flex items-center">
-                                <div
-                                    className={`flex-grow h-2 rounded-full ${step >= 1 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
-                                <div className="w-4"></div>
-                                <div
-                                    className={`flex-grow h-2 rounded-full ${step >= 2 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
-                                <div className="w-4"></div>
-                                <div
-                                    className={`flex-grow h-2 rounded-full ${step >= 3 ? 'bg-gradient-to-r from-primary to-info' : 'bg-secondary'}`}></div>
-                            </div>
-                            <div className="flex justify-between mt-2 text-xs text-muted">
-                                <span>{t('resetPassword.progress.email')}</span>
-                                <span>{t('resetPassword.progress.verification')}</span>
-                                <span>{t('resetPassword.progress.final')}</span>
-                            </div>
-                        </div>
-                        
-                        {step === 1 && (
-                            <form className="space-y-4">
-                                <div className="mb-5">
-                                    <label htmlFor="email" className="block text-sm font-medium mb-1 text-muted">
-                                        {t('resetPassword.fields.email.label')}
-                                    </label>
-                                    <div className="relative">
-                                        <FontAwesomeIcon icon={faEnvelope}
-                                                         className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
-                                        <input
-                                            type="email"
-                                            id="email"
-                                            placeholder={t('resetPassword.fields.email.placeholder')}
-                                            className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
-                                            value={email}
-                                            onChange={(e) => setEmail(e.target.value)}
-                                            required
-                                        />
-                                    </div>
-                                </div>
-
-                                <div className="flex flex-col space-y-3">
-                                    <button
-                                        type="button"
-                                        onClick={handleEmailCheck}
-                                        className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
-                                    >
-                                        {t('resetPassword.verify')}
-                                    </button>
-
-                                    <a
-                                        href="/login/login"
-                                        className="w-full py-4 bg-secondary text-textPrimary font-semibold rounded-xl hover:bg-gray-dark transition-colors flex items-center justify-center gap-2"
-                                    >
-                                        <FontAwesomeIcon icon={faArrowLeft} className="w-4 h-4" />
-                                        {t('resetPassword.backToLogin')}
-                                    </a>
-                                </div>
-                            </form>
-                        )}
-                        
-                        {step === 2 && (
-                            <form className="space-y-4">
-                                <div className="mb-5">
-                                    <label htmlFor="verificationCode"
-                                           className="block text-sm font-medium mb-1 text-muted">
-                                        {t('resetPassword.fields.code.label')}
-                                    </label>
-                                    <div className="relative">
-                                        <FontAwesomeIcon icon={faKey}
-                                                         className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
-                                        <input
-                                            type="text"
-                                            id="verificationCode"
-                                            placeholder={t('resetPassword.fields.code.placeholder')}
-                                            className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
-                                            value={verificationCode}
-                                            onChange={(e) => setVerificationCode(e.target.value)}
-                                            disabled={isConfirmed}
-                                            required
-                                        />
-                                    </div>
-                                </div>
-                                
-                                {isConfirmed && (
-                                    <div className="mb-5">
-                                        <label htmlFor="newPassword"
-                                               className="block text-sm font-medium mb-1 text-muted">
-                                            {t('resetPassword.fields.newPassword.label')}
-                                        </label>
-                                        <div className="relative">
-                                            <FontAwesomeIcon icon={faLock}
-                                                             className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted w-5 h-5"/>
-                                            <input
-                                                type="password"
-                                                id="newPassword"
-                                                placeholder={t('resetPassword.fields.newPassword.placeholder')}
-                                                className="w-full pl-12 pr-4 py-4 bg-secondary border border-gray-dark rounded-xl focus:outline-none focus:border-primary transition-colors"
-                                                value={newPassword}
-                                                onChange={(e) => setNewPassword(e.target.value)}
-                                                required
-                                            />
-                                        </div>
-                                    </div>
-                                )}
-                                
-                                <div className="flex flex-col space-y-3 mt-6">
-                                    <button
-                                        type="button"
-                                        onClick={isConfirmed ? handleNewPassword : handleConfirm}
-                                        className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
-                                    >
-                                        {isConfirmed ? t('resetPassword.changePassword') : t('resetPassword.confirm')}
-                                    </button>
-                                    
-                                    <button
-                                        type="button"
-                                        onClick={handlePrevStep}
-                                        className="w-full py-4 bg-secondary text-textPrimary font-semibold rounded-xl hover:bg-gray-dark transition-colors"
-                                    >
-                                        {t('resetPassword.back')}
-                                    </button>
-                                </div>
-                            </form>
-                        )}
-                        
-                        {step === 3 && (
-                            <div className="space-y-6">
-                                <div className="p-4 bg-success/20 border border-success rounded-xl">
-                                    <p className="text-center text-text">
-                                        {t('resetPassword.success')}
-                                    </p>
-                                </div>
-                                <div className="mt-6">
-                                    <a href="/login/login" className="block w-full">
-                                        <button
-                                            type="button"
-                                            className="w-full py-4 bg-gradient-to-r from-primary to-info text-textPrimary font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/20 transition-all"
-                                        >
-                                            {t('resetPassword.goToLogin')}
-                                        </button>
-                                    </a>
-                                </div>
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
-        </main>
-    )
-}
+'use client'
+import {useContext, useState} from "react";
+import {Mail, KeyRound, Lock, ArrowLeft} from 'lucide-react';
+import {QueryDataResponse} from "@/shared/interface";
+import {AlertContext} from "@/context/AlertContext";
+import {useTranslations} from "@/lib/i18n";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+import {apiPostPublic} from "@/lib/api/client";
+import Button from "@/components/ui/Button";
+import InputField from "@/components/form/InputField";
+import TextInput from "@/components/form/TextInput";
+
+export default function ForgetPasswordPage() {
+    const [step, setStep] = useState(1);
+    const [email, setEmail] = useState('');
+    const [verificationCode, setVerificationCode] = useState('');
+    const [isConfirmed, setIsConfirmed] = useState(false);
+    const [newPassword, setNewPassword] = useState<string>('');
+    const {errorMessage, successMessage} = useContext(AlertContext);
+    const t = useTranslations();
+    const {lang} = useContext<LangContextProps>(LangContext)
+
+    async function handleEmailCheck(): Promise<void> {
+        if (!email) {
+            errorMessage(t('resetPassword.error.emailInvalid'));
+            return;
+        }
+        const emailRegEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegEx.test(email)) {
+            errorMessage(t('resetPassword.error.emailFormat'));
+            return;
+        }
+        try {
+            const response: QueryDataResponse<null> = await apiPostPublic<QueryDataResponse<null>>('user/email-check', {email}, lang);
+            if (response.valid) {
+                successMessage(response.message ?? '');
+                setStep(2);
+            } else {
+                errorMessage(response.message ?? '');
+            }
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(t('resetPassword.error.emailServer'));
+            } else {
+                errorMessage(t('resetPassword.error.emailUnknown'));
+            }
+        }
+    }
+
+    async function handleConfirm(): Promise<void> {
+        try {
+            const response: QueryDataResponse<null> = await apiPostPublic<QueryDataResponse<null>>('user/verify-code', {
+                verifyCode: verificationCode, email,
+            }, lang);
+            if (response.valid) {
+                successMessage(response.message ?? '');
+                setIsConfirmed(true);
+            } else {
+                errorMessage(response.message ?? '');
+            }
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(t('resetPassword.error.codeServer'));
+            } else {
+                errorMessage(t('resetPassword.error.codeUnknown'));
+            }
+        }
+    }
+
+    async function handleNewPassword(): Promise<void> {
+        try {
+            const response: QueryDataResponse<null> = await apiPostPublic<QueryDataResponse<null>>('password/reset', {
+                email, newPassword, code: verificationCode
+            }, lang);
+            if (response.valid) {
+                successMessage(response.message ?? '');
+                setStep(3);
+            } else {
+                errorMessage(response.message ?? '');
+            }
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(t('resetPassword.error.passwordServer'));
+            } else {
+                errorMessage(t('resetPassword.error.passwordUnknown'));
+            }
+        }
+    }
+
+    return (
+        <main className="flex min-h-screen flex-col items-center justify-center bg-tertiary text-text-primary p-4 font-['Lora']">
+            <div className="w-full max-w-md px-4 py-10">
+                <div className="flex justify-center mb-8">
+                    <img src="/logo.png" alt="ERitors" className="object-contain" style={{width: 320, height: 107}}/>
+                </div>
+
+                <div className="text-center mb-6">
+                    <h1 className="text-2xl sm:text-3xl font-bold mb-2 font-['ADLaM_Display'] tracking-wide">{t('resetPassword.title')}</h1>
+                    <p className="text-muted text-sm">{t('resetPassword.subtitle')}</p>
+                </div>
+
+                {step < 3 && (
+                    <>
+                        <div className="overflow-hidden rounded-xl mb-4">
+                            <div className="flex items-center">
+                                <div className={`flex-grow h-2 ${step >= 1 ? 'bg-primary' : 'bg-secondary'}`}></div>
+                                <div className="w-1 bg-tertiary"></div>
+                                <div className={`flex-grow h-2 ${step >= 2 ? 'bg-primary' : 'bg-secondary'}`}></div>
+                                <div className="w-1 bg-tertiary"></div>
+                                <div className={`flex-grow h-2 ${step >= 3 ? 'bg-primary' : 'bg-secondary'}`}></div>
+                            </div>
+                            <div className="bg-darkest-background p-5 space-y-4">
+                                {step === 1 && (
+                                    <InputField icon={Mail} fieldName={t('resetPassword.fields.email.label')} input={
+                                        <TextInput value={email} setValue={(e) => setEmail(e.target.value)}
+                                                   placeholder={t('resetPassword.fields.email.placeholder')}/>
+                                    }/>
+                                )}
+                                {step === 2 && (
+                                    <>
+                                        <InputField icon={KeyRound} fieldName={t('resetPassword.fields.code.label')} input={
+                                            <TextInput value={verificationCode}
+                                                       setValue={(e) => setVerificationCode(e.target.value)}
+                                                       placeholder={t('resetPassword.fields.code.placeholder')}
+                                                       disabled={isConfirmed}/>
+                                        }/>
+                                        {isConfirmed && (
+                                            <div>
+                                                <h3 className="text-text-secondary text-sm font-medium flex items-center gap-2 mb-2">
+                                                    <Lock className="text-primary w-5 h-5" strokeWidth={1.75}/>
+                                                    {t('resetPassword.fields.newPassword.label')}
+                                                </h3>
+                                                <input type="password"
+                                                       placeholder={t('resetPassword.fields.newPassword.placeholder')}
+                                                       className="input-base" value={newPassword}
+                                                       onChange={(e) => setNewPassword(e.target.value)} required/>
+                                            </div>
+                                        )}
+                                    </>
+                                )}
+                            </div>
+                        </div>
+
+                        <div className="space-y-3">
+                            {step === 1 && (
+                                <>
+                                    <Button variant="primary" fullWidth size="lg" onClick={handleEmailCheck}>
+                                        {t('resetPassword.verify')}
+                                    </Button>
+                                    <a href="/login/login" className="block w-full">
+                                        <Button variant="secondary" fullWidth icon={ArrowLeft}>
+                                            {t('resetPassword.backToLogin')}
+                                        </Button>
+                                    </a>
+                                </>
+                            )}
+                            {step === 2 && (
+                                <>
+                                    <Button variant="primary" fullWidth size="lg"
+                                            onClick={isConfirmed ? handleNewPassword : handleConfirm}>
+                                        {isConfirmed ? t('resetPassword.changePassword') : t('resetPassword.confirm')}
+                                    </Button>
+                                    <Button variant="secondary" fullWidth onClick={() => setStep(1)}>
+                                        {t('resetPassword.back')}
+                                    </Button>
+                                </>
+                            )}
+                        </div>
+                    </>
+                )}
+
+                {step === 3 && (
+                    <>
+                        <div className="bg-darkest-background rounded-xl p-5 mb-4">
+                            <div className="p-4 bg-success/20 border border-success rounded-xl">
+                                <p className="text-center text-text-primary">{t('resetPassword.success')}</p>
+                            </div>
+                        </div>
+
+                        <a href="/login/login" className="block w-full">
+                            <Button variant="primary" fullWidth size="lg">
+                                {t('resetPassword.goToLogin')}
+                            </Button>
+                        </a>
+                    </>
+                )}
+            </div>
+        </main>
+    )
+}
diff --git a/app/page.tsx b/app/page.tsx
index c2aef6d..5741499 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,797 +1,6 @@
 'use client';
-import {useCallback, useContext, useEffect, useRef, useState} from 'react';
-import {BookContext} from "@/context/BookContext";
-import {ChapterProps} from "@/lib/models/Chapter";
-import {ChapterContext} from '@/context/ChapterContext';
-import {EditorContext} from '@/context/EditorContext'
-import {Editor, useEditor} from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import Underline from "@tiptap/extension-underline";
-import TextAlign from "@tiptap/extension-text-align";
-import {AlertContext, AlertProvider} from "@/context/AlertContext";
-import System from "@/lib/models/System";
-import {SessionContext} from '@/context/SessionContext';
-import {SessionProps} from "@/lib/models/Session";
-import User, {UserProps} from "@/lib/models/User";
-import {BookProps} from "@/lib/models/Book";
-import ScribeTopBar from "@/components/ScribeTopBar";
-import ScribeControllerBar from "@/components/ScribeControllerBar";
-import ScribeLeftBar from "@/components/leftbar/ScribeLeftBar";
-import ScribeEditor from "@/components/editor/ScribeEditor";
-import ComposerRightBar from "@/components/rightbar/ComposerRightBar";
-import ScribeFooterBar from "@/components/ScribeFooterBar";
-import GuideTour, {GuideStep} from "@/components/GuideTour";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faBookMedical, faFeather} from "@fortawesome/free-solid-svg-icons";
-import TermsOfUse from "@/components/TermsOfUse";
-import frMessages from '@/lib/locales/fr.json';
-import enMessages from '@/lib/locales/en.json';
-import {NextIntlClientProvider, useTranslations} from "next-intl";
-import {LangContext} from "@/context/LangContext";
-import {AIUsageContext} from "@/context/AIUsageContext";
-import OfflineProvider from "@/context/OfflineProvider";
-import OfflineContext, {OfflineMode} from "@/context/OfflineContext";
-import OfflinePinSetup from "@/components/offline/OfflinePinSetup";
-import OfflinePinVerify from "@/components/offline/OfflinePinVerify";
-import {SyncedBook, BookSyncCompare, compareBookSyncs} from "@/lib/models/SyncedBook";
-import {SyncedSeries, SeriesSyncCompare, compareSeriesSyncs} from "@/lib/models/SyncedSeries";
-import {BooksSyncContext} from "@/context/BooksSyncContext";
-import {SeriesSyncContext} from "@/context/SeriesSyncContext";
-import useSyncBooks from "@/hooks/useSyncBooks";
-import useSyncSeries from "@/hooks/useSyncSeries";
-import {LocalSyncQueueContext, LocalSyncOperation} from "@/context/SyncQueueContext";
-import * as tauri from '@/lib/tauri';
+import BookList from '@/components/book/BookList';
 
-interface RemovedItemRecord {
-    removal_id: string;
-    table_name: string;
-    entity_id: string;
-    book_id: string | null;
-    user_id: string;
-    deleted_at: number;
-}
-
-interface SyncedBooksResponse {
-    books: SyncedBook[];
-    tombstones: RemovedItemRecord[];
-}
-
-interface SyncedSeriesResponse {
-    series: SyncedSeries[];
-    tombstones: RemovedItemRecord[];
-}
-
-const messagesMap = {
-    fr: frMessages,
-    en: enMessages
-};
-
-function AutoSyncOnReconnect() {
-    const {offlineMode} = useContext(OfflineContext);
-    const {session} = useContext(SessionContext);
-    const {syncAllToServer: syncAllBooksToServer, syncAllFromServer: syncAllBooksFromServer, refreshBooks, booksToSyncToServer, booksToSyncFromServer} = useSyncBooks();
-    const {syncAllToServer: syncAllSeriesToServer, syncAllFromServer: syncAllSeriesFromServer, refreshSeries, seriesToSyncToServer, seriesToSyncFromServer} = useSyncSeries();
-    const isSyncingRef = useRef<boolean>(false);
-    const hasRefreshedRef = useRef<boolean>(false);
-
-    const saveLastOnlineTimestamp = useCallback((): void => {
-        const timestamp: number = Math.floor(Date.now() / 1000);
-        localStorage.setItem('lastOnlineTimestamp', timestamp.toString());
-    }, []);
-
-    // Refresh sync data when online + authenticated + DB ready
-    useEffect((): void => {
-        if (!offlineMode.isOffline && session.isConnected && offlineMode.isDatabaseInitialized) {
-            hasRefreshedRef.current = true;
-            Promise.all([refreshBooks(), refreshSeries()]);
-        }
-    }, [offlineMode.isOffline, session.isConnected, offlineMode.isDatabaseInitialized]);
-
-    // Auto-sync when diffs become available (reactive, no flags)
-    useEffect((): void => {
-        if (offlineMode.isOffline || !session.isConnected || isSyncingRef.current || !hasRefreshedRef.current) return;
-
-        const syncPromises: Promise<void>[] = [];
-
-        if (booksToSyncToServer.length > 0) syncPromises.push(syncAllBooksToServer());
-        if (booksToSyncFromServer.length > 0) syncPromises.push(syncAllBooksFromServer());
-        if (seriesToSyncToServer.length > 0) syncPromises.push(syncAllSeriesToServer());
-        if (seriesToSyncFromServer.length > 0) syncPromises.push(syncAllSeriesFromServer());
-
-        if (syncPromises.length > 0) {
-            isSyncingRef.current = true;
-            Promise.all(syncPromises).then((): void => {
-                saveLastOnlineTimestamp();
-                isSyncingRef.current = false;
-            }).catch((): void => {
-                isSyncingRef.current = false;
-            });
-        }
-    }, [booksToSyncToServer, booksToSyncFromServer, seriesToSyncToServer, seriesToSyncFromServer]);
-
-    // Update lastOnlineTimestamp every 5 minutes while online
-    useEffect((): (() => void) | void => {
-        if (!offlineMode.isOffline && session.isConnected) {
-            const intervalId: NodeJS.Timeout = setInterval((): void => {
-                saveLastOnlineTimestamp();
-            }, 5 * 60 * 1000);
-
-            return (): void => clearInterval(intervalId);
-        }
-    }, [offlineMode.isOffline, session.isConnected, saveLastOnlineTimestamp]);
-
-    return null;
-}
-
-function ScribeContent() {
-    const t = useTranslations();
-    const {lang: locale} = useContext(LangContext);
-    const {errorMessage} = useContext(AlertContext);
-    const {initializeDatabase, setOfflineMode, isCurrentlyOffline, offlineMode} = useContext(OfflineContext);
-    const editor: Editor | null = useEditor({
-        extensions: [
-            StarterKit,
-            Underline,
-            TextAlign.configure({
-                types: ['heading', 'paragraph'],
-            }),
-        ],
-        injectCSS: false,
-        immediatelyRender: false,
-        shouldRerenderOnTransaction: true,
-    });
-    
-    const [session, setSession] = useState<SessionProps>({user: null, accessToken: '', isConnected: false});
-    const [currentChapter, setCurrentChapter] = useState<ChapterProps | undefined>(undefined);
-    const [currentBook, setCurrentBook] = useState<BookProps | null>(null);
-    
-    const [serverSyncedBooks, setServerSyncedBooks] = useState<SyncedBook[]>([]);
-    const [localSyncedBooks, setLocalSyncedBooks] = useState<SyncedBook[]>([]);
-    const [bookSyncDiffsFromServer, setBookSyncDiffsFromServer] = useState<BookSyncCompare[]>([]);
-    const [bookSyncDiffsToServer, setBookSyncDiffsToServer] = useState<BookSyncCompare[]>([]);
-    const [serverOnlyBooks, setServerOnlyBooks] = useState<SyncedBook[]>([]);
-    const [localOnlyBooks, setLocalOnlyBooks] = useState<SyncedBook[]>([]);
-
-    const [serverSyncedSeries, setServerSyncedSeries] = useState<SyncedSeries[]>([]);
-    const [localSyncedSeries, setLocalSyncedSeries] = useState<SyncedSeries[]>([]);
-    const [seriesSyncDiffsFromServer, setSeriesSyncDiffsFromServer] = useState<SeriesSyncCompare[]>([]);
-    const [seriesSyncDiffsToServer, setSeriesSyncDiffsToServer] = useState<SeriesSyncCompare[]>([]);
-    const [serverOnlySeries, setServerOnlySeries] = useState<SyncedSeries[]>([]);
-    const [localOnlySeries, setLocalOnlySeries] = useState<SyncedSeries[]>([]);
-
-    const [currentCredits, setCurrentCredits] = useState<number>(160);
-    const [amountSpent, setAmountSpent] = useState<number>(session.user?.aiUsage || 0);
-
-    const [isLoading, setIsLoading] = useState<boolean>(true);
-
-    const [isTermsAccepted, setIsTermsAccepted] = useState<boolean>(false);
-    const [homeStepsGuide, setHomeStepsGuide] = useState<boolean>(false);
-    const [showPinSetup, setShowPinSetup] = useState<boolean>(false);
-    const [showPinVerify, setShowPinVerify] = useState<boolean>(false);
-
-    const [localSyncQueue, setLocalSyncQueue] = useState<LocalSyncOperation[]>([]);
-    const [isQueueProcessing, setIsQueueProcessing] = useState<boolean>(false);
-
-
-    function addToLocalSyncQueue(channel: string, data: Record<string, unknown>): void {
-        const operation: LocalSyncOperation = {
-            id: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
-            channel,
-            data,
-            timestamp: Date.now(),
-        };
-        setLocalSyncQueue((prev: LocalSyncOperation[]): LocalSyncOperation[] => [...prev, operation]);
-    }
-
-    useEffect((): void => {
-        if (localSyncQueue.length === 0 || isQueueProcessing) {
-            return;
-        }
-
-        async function processQueue(): Promise<void> {
-            setIsQueueProcessing(true);
-
-            const queueCopy: LocalSyncOperation[] = [...localSyncQueue];
-
-            for (const operation of queueCopy) {
-                try {
-                    await tauri.invoke(operation.channel, operation.data);
-                    setLocalSyncQueue((prev: LocalSyncOperation[]): LocalSyncOperation[] =>
-                        prev.filter((op: LocalSyncOperation): boolean => op.id !== operation.id)
-                    );
-                } catch (error) {
-                    console.error(`[LocalSyncQueue] Failed to process operation ${operation.channel}:`, error);
-                }
-            }
-
-            setIsQueueProcessing(false);
-        }
-
-        processQueue().then();
-    }, [localSyncQueue, isQueueProcessing]);
-
-    const homeSteps: GuideStep[] = [
-        {
-            id: 0,
-            x: 50,
-            y: 50,
-            title: t("homePage.guide.welcome", {name: session.user?.name || ''}),
-            content: (
-                <div>
-                    <p>{t("homePage.guide.step0.description1")}</p>
-                    <br/>
-                    <p>{t("homePage.guide.step0.description2")}</p>
-                </div>
-            ),
-        },
-        {
-            id: 1, position: 'right',
-            targetSelector: `[data-guide="left-panel-container"]`,
-            title: t("homePage.guide.step1.title"),
-            content: (
-                <div>
-                    <p className={'flex items-center space-x-2'}>
-                        <strong>
-                            <FontAwesomeIcon icon={faBookMedical} className={'w-5 h-5'}/> :
-                        </strong>
-                        {t("homePage.guide.step1.addBook")}
-                    </p>
-                    <br/>
-                    <p><strong><FontAwesomeIcon icon={faFeather}
-                                                className={'w-5 h-5'}/> :</strong> {t("homePage.guide.step1.generateStory")}
-                    </p>
-                </div>
-            ),
-        },
-        {
-            id: 2,
-            title: t("homePage.guide.step2.title"), position: 'bottom',
-            targetSelector: `[data-guide="search-bar"]`,
-            content: (
-                <div>
-                    <p>{t("homePage.guide.step2.description")}</p>
-                </div>
-            ),
-        },
-        {
-            id: 3,
-            title: t("homePage.guide.step3.title"),
-            targetSelector: `[data-guide="user-dropdown"]`,
-            position: 'auto',
-            content: (
-                <div>
-                    <p>{t("homePage.guide.step3.description")}</p>
-                </div>
-            ),
-        },
-        {
-            id: 4,
-            title: t("homePage.guide.step4.title"),
-            content: (
-                <div>
-                    <p>{t("homePage.guide.step4.description1")}</p>
-                    <br/>
-                    <p>{t("homePage.guide.step4.description2")}</p>
-                </div>
-            ),
-        },
-    ];
-    
-    useEffect((): void => {
-        checkAuthentification().then();
-
-        let unlisten: (() => void) | undefined;
-        import('@tauri-apps/api/event').then(function ({listen}) {
-            listen('auth-success', function () {
-                checkAuthentification().then();
-            }).then(function (fn) {
-                unlisten = fn;
-            });
-        });
-
-        return (): void => {
-            if (unlisten) unlisten();
-        };
-    }, []);
-    
-    useEffect((): void => {
-        if (session.isConnected) {
-            setIsTermsAccepted(session.user?.termsAccepted ?? false);
-            setHomeStepsGuide(User.guideTourDone(session.user?.guideTour ?? [], 'home-basic'));
-            setIsLoading(false);
-        }
-    }, [session]);
-    
-    useEffect((): void => {
-        if (session.isConnected) {
-            if (currentBook) {
-                getLastChapter().then();
-            } else {
-                refreshBooks().then();
-            }
-        }
-    }, [currentBook]);
-    
-    useEffect((): void => {
-        const diffsFromServer: BookSyncCompare[] = [];
-        const diffsToServer: BookSyncCompare[] = [];
-
-        serverSyncedBooks.forEach((serverBook: SyncedBook): void => {
-            const localBook: SyncedBook | undefined = localSyncedBooks.find((book: SyncedBook): boolean => book.id === serverBook.id);
-            if (!localBook) {
-                return;
-            }
-
-            const diff: BookSyncCompare | null = compareBookSyncs(serverBook, localBook);
-            if (diff) {
-                diffsFromServer.push(diff);
-            }
-        });
-
-        localSyncedBooks.forEach((localBook: SyncedBook): void => {
-            const serverBook: SyncedBook | undefined = serverSyncedBooks.find((book: SyncedBook): boolean => book.id === localBook.id);
-            if (!serverBook) {
-                return;
-            }
-
-            const diff: BookSyncCompare | null = compareBookSyncs(localBook, serverBook);
-            if (diff) {
-                diffsToServer.push(diff);
-            }
-        });
-        
-        setBookSyncDiffsFromServer(diffsFromServer);
-        setBookSyncDiffsToServer(diffsToServer);
-        setServerOnlyBooks(serverSyncedBooks.filter((serverBook: SyncedBook):boolean => !localSyncedBooks.find((localBook: SyncedBook):boolean => localBook.id === serverBook.id)))
-        setLocalOnlyBooks(localSyncedBooks.filter((localBook: SyncedBook):boolean => !serverSyncedBooks.find((serverBook: SyncedBook):boolean => serverBook.id === localBook.id)))
-    }, [localSyncedBooks, serverSyncedBooks]);
-
-    useEffect((): void => {
-        const diffsFromServer: SeriesSyncCompare[] = [];
-        const diffsToServer: SeriesSyncCompare[] = [];
-
-        serverSyncedSeries.forEach((serverSeries: SyncedSeries): void => {
-            const localSeries: SyncedSeries | undefined = localSyncedSeries.find((series: SyncedSeries): boolean => series.id === serverSeries.id);
-            if (!localSeries) {
-                return;
-            }
-
-            const diff: SeriesSyncCompare | null = compareSeriesSyncs(serverSeries, localSeries);
-            if (diff) {
-                diffsFromServer.push(diff);
-            }
-        });
-
-        localSyncedSeries.forEach((localSeries: SyncedSeries): void => {
-            const serverSeries: SyncedSeries | undefined = serverSyncedSeries.find((series: SyncedSeries): boolean => series.id === localSeries.id);
-            if (!serverSeries) {
-                return;
-            }
-
-            const diff: SeriesSyncCompare | null = compareSeriesSyncs(localSeries, serverSeries);
-            if (diff) {
-                diffsToServer.push(diff);
-            }
-        });
-
-        setSeriesSyncDiffsFromServer(diffsFromServer);
-        setSeriesSyncDiffsToServer(diffsToServer);
-        setServerOnlySeries(serverSyncedSeries.filter((serverSeries: SyncedSeries): boolean => !localSyncedSeries.find((localSeries: SyncedSeries): boolean => localSeries.id === serverSeries.id)));
-        setLocalOnlySeries(localSyncedSeries.filter((localSeries: SyncedSeries): boolean => !serverSyncedSeries.find((serverSeries: SyncedSeries): boolean => serverSeries.id === localSeries.id)));
-    }, [localSyncedSeries, serverSyncedSeries]);
-
-    async function refreshBooks(): Promise<void> {
-        try {
-            let localBooksResponse: SyncedBook[] = [];
-            let serverBooksResponse: SyncedBook[] = [];
-
-            if (!isCurrentlyOffline()) {
-                if (offlineMode.isDatabaseInitialized) {
-                    localBooksResponse = await tauri.getSyncedBooks() as SyncedBook[];
-                    const lastOnlineStr: string | null = localStorage.getItem('lastOnlineTimestamp');
-                    const lastOnlineTimestamp: number = lastOnlineStr ? parseInt(lastOnlineStr, 10) : 0;
-                    const localTombstones: RemovedItemRecord[] = await tauri.getTombstonesSince(lastOnlineTimestamp) as RemovedItemRecord[];
-                    const serverResponse: SyncedBooksResponse = await System.authPostToServer<SyncedBooksResponse>('books/synced', { lastOnlineTimestamp, tombstones: localTombstones }, session.accessToken, locale);
-                    serverBooksResponse = serverResponse.books;
-                    await tauri.applyBookTombstones(serverResponse.tombstones);
-                } else {
-                    const serverResponse: SyncedBooksResponse = await System.authPostToServer<SyncedBooksResponse>('books/synced', { lastOnlineTimestamp: 0, tombstones: [] }, session.accessToken, locale);
-                    serverBooksResponse = serverResponse.books;
-                }
-            } else {
-                if (offlineMode.isDatabaseInitialized) {
-                    localBooksResponse = await tauri.getSyncedBooks() as SyncedBook[];
-                }
-            }
-
-            setServerSyncedBooks(serverBooksResponse);
-            setLocalSyncedBooks(localBooksResponse);
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t("homePage.errors.fetchBooksError"));
-            }
-        }
-    }
-
-    async function refreshSeries(): Promise<void> {
-        try {
-            let localSeriesResponse: SyncedSeries[] = [];
-            let serverSeriesResponse: SyncedSeries[] = [];
-
-            if (!isCurrentlyOffline()) {
-                if (offlineMode.isDatabaseInitialized) {
-                    localSeriesResponse = await tauri.getSyncedSeries() as SyncedSeries[];
-                    const lastOnlineStr: string | null = localStorage.getItem('lastOnlineTimestamp');
-                    const lastOnlineTimestamp: number = lastOnlineStr ? parseInt(lastOnlineStr, 10) : 0;
-                    const localTombstones: RemovedItemRecord[] = await tauri.getTombstonesSince(lastOnlineTimestamp) as RemovedItemRecord[];
-                    const serverResponse: SyncedSeriesResponse = await System.authPostToServer<SyncedSeriesResponse>('series/synced', { lastOnlineTimestamp, tombstones: localTombstones }, session.accessToken, locale);
-                    serverSeriesResponse = serverResponse.series;
-                    await tauri.applySeriesTombstones(serverResponse.tombstones);
-                } else {
-                    const serverResponse: SyncedSeriesResponse = await System.authPostToServer<SyncedSeriesResponse>('series/synced', { lastOnlineTimestamp: 0, tombstones: [] }, session.accessToken, locale);
-                    serverSeriesResponse = serverResponse.series;
-                }
-            } else {
-                if (offlineMode.isDatabaseInitialized) {
-                    localSeriesResponse = await tauri.getSyncedSeries() as SyncedSeries[];
-                }
-            }
-
-            setServerSyncedSeries(serverSeriesResponse);
-            setLocalSyncedSeries(localSeriesResponse);
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t("homePage.errors.fetchSeriesError"));
-            }
-        }
-    }
-
-
-    async function handlePinVerifySuccess(userId: string): Promise<void> {
-        try {
-            const storedToken: string | null = await tauri.getToken();
-            const encryptionKey: string | null = await tauri.getUserEncryptionKey(userId);
-
-            if (encryptionKey) {
-                await tauri.dbInitialize(userId, encryptionKey);
-                setOfflineMode(prev => ({...prev, isDatabaseInitialized: true}));
-
-                const localUser: UserProps = await tauri.getUserInfo();
-                if (localUser && localUser.id) {
-                    setSession({
-                        isConnected: true,
-                        user: localUser,
-                        accessToken: storedToken || '',
-                    });
-                    setShowPinVerify(false);
-                    setCurrentCredits(localUser.creditsBalance || 0);
-                    setAmountSpent(localUser.aiUsage || 0);
-                } else {
-                    errorMessage(t("homePage.errors.localDataError"));
-                }
-            } else {
-                errorMessage(t("homePage.errors.encryptionKeyError"));
-            }
-        } catch (error) {
-            console.error('[OfflinePin] Error initializing offline mode:', error);
-            errorMessage(t("homePage.errors.offlineModeError"));
-        }
-    }
-
-    async function handleHomeTour(): Promise<void> {
-        try {
-            if (!isCurrentlyOffline()) {
-                const response: boolean = await System.authPostToServer<boolean>('logs/tour', {
-                        plateforme: 'desktop',
-                        tour: 'home-basic'
-                    },
-                    session.accessToken,
-                    locale
-                );
-                if (response) {
-                    setSession(User.setNewGuideTour(session, 'home-basic'));
-                    setHomeStepsGuide(false);
-                }
-            } else {
-                const completedGuides = JSON.parse(localStorage.getItem('completedGuides') || '[]');
-                if (!completedGuides.includes('home-basic')) {
-                    completedGuides.push('home-basic');
-                    localStorage.setItem('completedGuides', JSON.stringify(completedGuides));
-                }
-                setSession(User.setNewGuideTour(session, 'home-basic'));
-                setHomeStepsGuide(false);
-            }
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t("homePage.errors.termsError"));
-            }
-        }
-    }
-    
-    async function checkAuthentification(): Promise<void> {
-        let token: string | null = null;
-
-        try {
-            token = await tauri.getToken();
-        } catch (e) {
-            console.error('Error getting token:', e);
-        }
-
-        if (token) {
-            try {
-                const user: UserProps = await System.authGetQueryToServer<UserProps>('user/infos', token, locale);
-                if (!user) {
-                    errorMessage(t("homePage.errors.userNotFound"));
-                    await tauri.removeToken();
-                    tauri.logout();
-                    return;
-                }
-
-                if (user.id) {
-                    try {
-                        const initResult = await tauri.initUser(user.id);
-                        if (!initResult.success) {
-                            errorMessage(initResult.error || t("homePage.errors.offlineInitError"));
-                            return;
-                        }
-                        try {
-                            const offlineStatus = await tauri.offlineModeGet();
-                            if (!offlineStatus.hasPin) {
-                                setTimeout(():void => {
-                                    setShowPinSetup(true);
-                                }, 2000);
-                            }
-                        } catch (error) {
-                            console.error('[Page] Error checking offline mode:', error);
-                        }
-                    } catch (error) {
-                        console.error('[Page] Error initializing user:', error);
-                    }
-                }
-                if (user.id) {
-                    try {
-                        const dbInitialized: boolean = await initializeDatabase(user.id);
-                        if (dbInitialized) {
-                            try {
-                                await tauri.syncUser({
-                                    userId: user.id,
-                                    username: user.username,
-                                    email: user.email
-                                });
-                            } catch (syncError) {
-                                console.error('[Page] syncUser failed:', syncError);
-                                errorMessage(t("homePage.errors.syncError"));
-                            }
-                        } else {
-                            errorMessage(t("homePage.errors.dbInitError"));
-                        }
-                    } catch (error) {
-                        console.error('[Page] DB init or sync failed:', error);
-                        errorMessage(t("homePage.errors.syncError"));
-                    }
-                }
-                setSession({
-                    isConnected: true,
-                    user: user,
-                    accessToken: token,
-                });
-                setCurrentCredits(user.creditsBalance)
-                setAmountSpent(user.aiUsage)
-            } catch (e: unknown) {
-                try {
-                    const offlineStatus = await tauri.offlineModeGet();
-
-                    if (offlineStatus.hasPin && offlineStatus.lastUserId) {
-                        setOfflineMode((prev:OfflineMode):OfflineMode => ({...prev, isOffline: true, isManuallyOffline: true, isNetworkOnline: false}));
-                        setShowPinVerify(true);
-                        setIsLoading(false);
-                        return;
-                    } else {
-                        await tauri.removeToken();
-                        tauri.logout();
-                    }
-                } catch (offlineError) {
-                    errorMessage(t("homePage.errors.offlineError"));
-                }
-
-                if (e instanceof Error) {
-                    errorMessage(e.message);
-                } else {
-                    errorMessage(t("homePage.errors.authenticationError"));
-                }
-            }
-        } else {
-            try {
-                const offlineStatus = await tauri.offlineModeGet();
-
-                if (offlineStatus.hasPin && offlineStatus.lastUserId) {
-                    setOfflineMode(prev => ({...prev, isOffline: true, isManuallyOffline: true, isNetworkOnline: false}));
-                    setShowPinVerify(true);
-                    setIsLoading(false);
-                    return;
-                }
-            } catch (error) {
-                errorMessage(t("homePage.errors.authenticationError"));
-            }
-            tauri.logout();
-        }
-    }
-    
-    async function handleTermsAcceptance(): Promise<void> {
-        try {
-            const response: boolean = await System.authPostToServer<boolean>(`user/terms/accept`, {
-                version: '2025-07-1'
-            }, session.accessToken, locale);
-            if (response) {
-                setIsTermsAccepted(true);
-                setHomeStepsGuide(true);
-                const newSession: SessionProps = {
-                    ...session,
-                    user: {
-                        ...session?.user as UserProps,
-                        termsAccepted: true
-                    }
-                }
-                setSession(newSession);
-            } else {
-                errorMessage(t("homePage.errors.termsAcceptError"));
-            }
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t("homePage.errors.termsAcceptError"));
-            }
-        }
-    }
-    
-    async function getLastChapter(): Promise<void> {
-        if (session?.accessToken) {
-            try {
-                let response: ChapterProps | null
-                if (isCurrentlyOffline()){
-                    if (!offlineMode.isDatabaseInitialized) {
-                        setCurrentChapter(undefined);
-                        return;
-                    }
-                    response = await tauri.getLastChapter(currentBook?.bookId ?? '')
-                } else {
-                    if (currentBook?.localBook) {
-                        if (!offlineMode.isDatabaseInitialized) {
-                            setCurrentChapter(undefined);
-                            return;
-                        }
-                        response = await tauri.getLastChapter(currentBook?.bookId ?? '')
-                    } else {
-                        response = await System.authGetQueryToServer<ChapterProps | null>(`chapter/last-chapter`, session.accessToken, locale, {bookid: currentBook?.bookId});
-                    }
-                }
-                if (response) {
-                    setCurrentChapter(response)
-                } else {
-                    setCurrentChapter(undefined);
-                }
-            } catch (e: unknown) {
-                if (e instanceof Error) {
-                    errorMessage(e.message);
-                } else {
-                    errorMessage(t("homePage.errors.lastChapterError"));
-                }
-            }
-        }
-    }
-
-    if (isLoading) {
-        return (
-            <div
-                className="bg-background text-text-primary h-screen flex flex-col items-center justify-center font-['Lora']">
-                <div className="flex flex-col items-center space-y-6">
-                    <div className="animate-pulse">
-                        <img src="/eritors-favicon-white.png" alt="ERitors Logo" style={{width: 400, height: 400}} />
-                    </div>
-                    <div className="flex space-x-2">
-                        <div className="w-2 h-2 bg-primary rounded-full animate-bounce"></div>
-                        <div className="w-2 h-2 bg-primary rounded-full animate-bounce delay-100"></div>
-                        <div className="w-2 h-2 bg-primary rounded-full animate-bounce delay-200"></div>
-                    </div>
-                    <p className="text-text-secondary text-sm">
-                        {t("homePage.loading")}
-                    </p>
-                </div>
-            </div>
-        )
-    }
-
-    return (
-        <SessionContext.Provider value={{session: session, setSession: setSession}}>
-            <LocalSyncQueueContext.Provider value={{
-                queue: localSyncQueue,
-                setQueue: setLocalSyncQueue,
-                addToQueue: addToLocalSyncQueue,
-                isProcessing: isQueueProcessing,
-            }}>
-                <BooksSyncContext.Provider value={{serverSyncedBooks, localSyncedBooks, booksToSyncFromServer:bookSyncDiffsFromServer, booksToSyncToServer:bookSyncDiffsToServer, setServerSyncedBooks, setLocalSyncedBooks, setServerOnlyBooks, setLocalOnlyBooks, setBooksToSyncFromServer:setBookSyncDiffsFromServer, setBooksToSyncToServer:setBookSyncDiffsToServer, serverOnlyBooks, localOnlyBooks}}>
-                <SeriesSyncContext.Provider value={{serverSyncedSeries, localSyncedSeries, seriesToSyncFromServer:seriesSyncDiffsFromServer, seriesToSyncToServer:seriesSyncDiffsToServer, setServerSyncedSeries, setLocalSyncedSeries, setServerOnlySeries, setLocalOnlySeries, setSeriesToSyncFromServer:setSeriesSyncDiffsFromServer, setSeriesToSyncToServer:setSeriesSyncDiffsToServer, serverOnlySeries, localOnlySeries}}>
-                    <AutoSyncOnReconnect/>
-                    <BookContext.Provider value={{book: currentBook, setBook: setCurrentBook}}>
-                        <ChapterContext.Provider value={{chapter: currentChapter, setChapter: setCurrentChapter}}>
-                            <AIUsageContext.Provider value={{totalCredits: currentCredits, setTotalCredits: setCurrentCredits, totalPrice: amountSpent, setTotalPrice: setAmountSpent}}>
-                            <div className="bg-background text-text-primary h-screen flex flex-col font-['Lora']">
-                                <ScribeTopBar/>
-                                <EditorContext.Provider value={{editor: editor}}>
-                                    <ScribeControllerBar/>
-                                    <div className="flex-1 flex overflow-hidden">
-                                        <ScribeLeftBar/>
-                                        <ScribeEditor/>
-                                        <ComposerRightBar/>
-                                    </div>
-                                    <ScribeFooterBar/>
-                                </EditorContext.Provider>
-                            </div>
-                            {
-                                homeStepsGuide && !isCurrentlyOffline() &&
-                                <GuideTour stepId={0} steps={homeSteps} onComplete={handleHomeTour}
-                                           onClose={(): void => setHomeStepsGuide(false)}/>
-                            }
-                            {
-                                !isTermsAccepted && !isCurrentlyOffline() && <TermsOfUse onAccept={handleTermsAcceptance}/>
-                            }
-                            {
-                                showPinSetup && (
-                                    <OfflinePinSetup
-                                        showOnFirstLogin={true}
-                                        onClose={():void => setShowPinSetup(false)}
-                                        onSuccess={():void => {
-                                            setShowPinSetup(false);
-                                        }}
-                                    />
-                                )
-                            }
-                            {
-                                showPinVerify && (
-                                    <OfflinePinVerify
-                                        onSuccess={handlePinVerifySuccess}
-                                        onCancel={():void => {}}
-                                    />
-                                )
-                            }
-                            </AIUsageContext.Provider>
-                        </ChapterContext.Provider>
-                    </BookContext.Provider>
-                </SeriesSyncContext.Provider>
-                </BooksSyncContext.Provider>
-            </LocalSyncQueueContext.Provider>
-        </SessionContext.Provider>
-    );
-}
-
-export default function Scribe() {
-    const [locale, setLocale] = useState<'fr' | 'en'>('fr');
-    
-    useEffect((): void => {
-        const lang: "fr" | "en" | null = System.getCookie('lang') as "fr" | "en" | null;
-        if (lang) {
-            setLocale(lang);
-        }
-    }, []);
-    
-    const messages = messagesMap[locale];
-    
-    return (
-        <LangContext.Provider value={{lang: locale, setLang: setLocale}}>
-            <NextIntlClientProvider locale={locale} messages={messages} timeZone="America/Montreal">
-                <OfflineProvider>
-                    <AlertProvider>
-                        <ScribeContent/>
-                    </AlertProvider>
-                </OfflineProvider>
-            </NextIntlClientProvider>
-        </LangContext.Provider>
-    );
+export default function HomePage() {
+    return <BookList/>;
 }
diff --git a/components/AlertBox.tsx b/components/AlertBox.tsx
deleted file mode 100644
index dae6978..0000000
--- a/components/AlertBox.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import {useEffect, useState} from 'react';
-import {createPortal} from 'react-dom';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faCheck, faExclamationTriangle, faInfoCircle, faTimes} from '@fortawesome/free-solid-svg-icons';
-import ConfirmButton from "@/components/form/ConfirmButton";
-import CancelButton from "@/components/form/CancelButton";
-
-export type AlertType = 'alert' | 'danger' | 'informatif' | 'success';
-
-interface AlertBoxProps {
-    title: string;
-    message: string;
-    type: AlertType;
-    confirmText?: string;
-    cancelText?: string;
-    onConfirm: () => Promise<void>;
-    onCancel: () => void;
-    children?: React.ReactNode;
-}
-
-export default function AlertBox(
-    {
-        title,
-        message,
-        type,
-        confirmText = 'Confirmer',
-        cancelText = 'Annuler',
-        onConfirm,
-        onCancel,
-        children
-    }: AlertBoxProps) {
-    const [mounted, setMounted] = useState(false);
-    
-    useEffect(() => {
-        setMounted(true);
-        return () => setMounted(false);
-    }, []);
-
-    function getAlertConfig(alertType: AlertType) {
-        switch (alertType) {
-            case 'alert':
-                return {
-                    background: 'bg-warning',
-                    borderColor: 'border-warning/30',
-                    icon: faExclamationTriangle,
-                    iconBg: 'bg-warning/10'
-                };
-            case 'danger':
-                return {
-                    background: 'bg-error',
-                    borderColor: 'border-error/30',
-                    icon: faTimes,
-                    iconBg: 'bg-error/10'
-                };
-            case 'informatif':
-                return {
-                    background: 'bg-info',
-                    borderColor: 'border-info/30',
-                    icon: faInfoCircle,
-                    iconBg: 'bg-info/10'
-                };
-            case 'success':
-            default:
-                return {
-                    background: 'bg-success',
-                    borderColor: 'border-success/30',
-                    icon: faCheck,
-                    iconBg: 'bg-success/10'
-                };
-        }
-    }
-
-    const alertSettings = getAlertConfig(type);
-    
-    const alertContent = (
-        <div
-            className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/60 backdrop-blur-md animate-fadeIn">
-            <div
-                className="relative w-full max-w-md rounded-2xl bg-tertiary shadow-2xl border border-secondary/50 overflow-hidden">
-                <div className={`${alertSettings.background} px-6 py-4 shadow-lg`}>
-                    <div className="flex items-center gap-4">
-                        <div
-                            className={`w-12 h-12 rounded-xl ${alertSettings.iconBg} flex items-center justify-center`}>
-                            <FontAwesomeIcon icon={alertSettings.icon} className="w-6 h-6 text-white"/>
-                        </div>
-                        <h3 className="text-xl font-bold text-white tracking-wide">{title}</h3>
-                    </div>
-                </div>
-                
-                <div className="p-6 bg-dark-background/30">
-                    <p className="text-text-primary whitespace-pre-line leading-relaxed">{message}</p>
-                    {children}
-                    <div className="flex justify-end gap-3 mt-6">
-                        <CancelButton callBackFunction={onCancel} text={cancelText}/>
-                        <ConfirmButton text={confirmText} buttonType={type} callBackFunction={onConfirm}/>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-    
-    if (!mounted) return null;
-    
-    return createPortal(alertContent, document.body);
-}
diff --git a/components/AlertStack.tsx b/components/AlertStack.tsx
deleted file mode 100644
index 3958ebc..0000000
--- a/components/AlertStack.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client';
-
-import {useEffect, useState} from 'react';
-import {createPortal} from 'react-dom';
-import StaticAlert from '@/components/StaticAlert';
-import {Alert} from '@/context/AlertProvider';
-
-interface AlertStackProps {
-    alerts: Alert[];
-    onClose: (id: string) => void;
-}
-
-export default function AlertStack({alerts, onClose}: AlertStackProps) {
-    const [mounted, setMounted] = useState(false);
-    
-    useEffect(() => {
-        setMounted(true);
-        return () => setMounted(false);
-    }, []);
-    
-    if (!mounted) return null;
-    
-    const alertContent = (
-        <div className="fixed top-4 right-4 z-50 flex flex-col gap-3 pointer-events-none">
-            {alerts.map((alert, index) => (
-                <div
-                    key={alert.id}
-                    className="pointer-events-auto"
-                    style={{
-                        animation: 'slideInFromRight 0.3s ease-out forwards',
-                        animationDelay: `${index * 50}ms`,
-                    }}
-                >
-                    <StaticAlert
-                        type={alert.type}
-                        message={alert.message}
-                        onClose={() => onClose(alert.id)}
-                    />
-                </div>
-            ))}
-            <style>{`
-                @keyframes slideInFromRight {
-                    from {
-                        transform: translateX(400px);
-                        opacity: 0;
-                    }
-                    to {
-                        transform: translateX(0);
-                        opacity: 1;
-                    }
-                }
-            `}</style>
-        </div>
-    );
-    
-    return createPortal(alertContent, document.body);
-}
diff --git a/components/CollapsableArea.tsx b/components/CollapsableArea.tsx
deleted file mode 100644
index ed79ab5..0000000
--- a/components/CollapsableArea.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faChevronDown, faChevronUp, IconDefinition} from "@fortawesome/free-solid-svg-icons";
-import React from "react";
-
-interface CollapsableAreaProps {
-    title: string;
-    children: React.ReactNode;
-    icon?: IconDefinition;
-}
-
-export default function CollapsableArea(
-    {
-        title,
-        children,
-        icon,
-    }: CollapsableAreaProps) {
-    const [isExpanded, setIsExpanded] = React.useState(false);
-
-    return (
-        <div
-            className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-4 border border-secondary/50 mb-4 shadow-md hover:shadow-lg transition-all duration-200">
-            <button
-                className="flex justify-between items-center w-full text-left group hover:scale-[1.02] transition-all duration-200"
-                    onClick={() => setIsExpanded(!isExpanded)}>
-                <div className="flex items-center">
-                    {
-                        icon && (
-                            <div
-                                className="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-2 shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-200">
-                                <FontAwesomeIcon
-                                    icon={icon}
-                                    className="text-white w-4 h-4 group-hover:rotate-12 transition-transform duration-200"
-                                />
-                            </div>
-                        )
-                    }
-                    <span className="text-text-primary font-bold">{title}</span>
-                </div>
-                <FontAwesomeIcon
-                    icon={isExpanded ? faChevronUp : faChevronDown}
-                    className="text-primary w-5 h-5 group-hover:scale-110 transition-all duration-200"
-                />
-            </button>
-
-            {isExpanded && (
-                <div className="mt-4 p-3 bg-secondary/20 rounded-lg border border-secondary/30 animate-fadeIn">
-                    {children}
-                </div>
-            )}
-        </div>
-    );
-}
diff --git a/components/CollapsableButton.tsx b/components/CollapsableButton.tsx
deleted file mode 100644
index 9954a6a..0000000
--- a/components/CollapsableButton.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import React from "react";
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
-
-interface CollapsableButtonProps {
-    showCollapsable: boolean;
-    text: string;
-    onClick: () => void;
-    icon?: IconDefinition;
-}
-
-export default function CollapsableButton(
-    {
-        showCollapsable,
-        text,
-        icon,
-        onClick
-    }: CollapsableButtonProps) {
-    return (
-        <button
-            onClick={onClick}
-            className={`group px-4 py-2 rounded-lg mr-2 transition-all duration-200 flex items-center gap-2 ${
-                showCollapsable
-                    ? 'bg-primary/20 text-primary border border-primary/40 shadow-md shadow-primary/20 scale-105'
-                    : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-sm hover:scale-105'
-            }`}
-        >
-            {icon && <FontAwesomeIcon icon={icon}
-                                      className="w-4 h-4 transition-transform duration-200 group-hover:scale-110"/>}
-            <span className={'hidden lg:block text-sm font-medium'}>{text}</span>
-        </button>
-    )
-}
diff --git a/components/Collapse.tsx b/components/Collapse.tsx
deleted file mode 100644
index 08d8534..0000000
--- a/components/Collapse.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import {JSX, useState} from "react";
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronDown, faChevronRight} from '@fortawesome/free-solid-svg-icons';
-
-export interface CollapseProps {
-    title: string;
-    content: JSX.Element;
-}
-
-export default function Collapse({title, content}: CollapseProps) {
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-    
-    function toggleCollapse(): void {
-        setIsOpen(!isOpen);
-    }
-    
-    return (
-        <div className="mb-4 shadow-md hover:shadow-lg transition-all duration-200">
-            <button
-                onClick={toggleCollapse}
-                className={`w-full text-left bg-secondary/50 hover:bg-secondary transition-all duration-200 p-4 flex items-center justify-between group border border-secondary/50 ${
-                    isOpen ? 'rounded-t-xl' : 'rounded-xl'
-                }`}
-            >
-                <span className="text-text-primary font-medium">{title}</span>
-                <FontAwesomeIcon
-                    icon={isOpen ? faChevronDown : faChevronRight}
-                    className="text-primary w-4 h-4 transition-transform group-hover:scale-110"
-                />
-            </button>
-            {isOpen && (
-                <div
-                    className="bg-secondary/30 border-l-4 border-primary p-4 rounded-b-xl border border-t-0 border-secondary/50 animate-fadeIn">
-                    <div className="text-text-primary">{content}</div>
-                </div>
-            )}
-        </div>
-    );
-}
\ No newline at end of file
diff --git a/components/CreditMeters.tsx b/components/CreditMeters.tsx
deleted file mode 100644
index da83f0b..0000000
--- a/components/CreditMeters.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, {useContext} from "react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faCoins, faDollarSign} from "@fortawesome/free-solid-svg-icons";
-import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
-
-export default function CreditCounter({isCredit}: { isCredit: boolean }) {
-    const {totalCredits, totalPrice} = useContext<AIUsageContextProps>(AIUsageContext)
-    
-    if (isCredit) {
-        return (
-            <div
-                className="flex items-center space-x-2 bg-secondary/50 rounded-xl px-3 py-2 border border-secondary/50 shadow-sm">
-                <FontAwesomeIcon icon={faCoins} className="w-4 h-4 text-warning"/>
-                <span className="text-sm text-text-primary font-medium">
-                    {Math.round(totalCredits)} crédits
-                </span>
-            </div>
-        );
-    }
-    
-    return (
-        <div
-            className="flex items-center space-x-2 bg-secondary/50 rounded-xl px-3 py-2 border border-secondary/50 shadow-sm">
-            <FontAwesomeIcon icon={faDollarSign} className="w-4 h-4 text-primary"/>
-            <span className="text-sm text-text-primary font-medium">
-                {totalPrice ? totalPrice.toFixed(2) : '0.00'}
-            </span>
-        </div>
-    );
-}
\ No newline at end of file
diff --git a/components/GuideTour.tsx b/components/GuideTour.tsx
index 314a078..f5a7328 100644
--- a/components/GuideTour.tsx
+++ b/components/GuideTour.tsx
@@ -1,6 +1,8 @@
-import {JSX, useEffect, useMemo, useRef, useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faXmark} from '@fortawesome/free-solid-svg-icons';
+import React, {JSX, useEffect, useRef, useState} from 'react';
+import {createPortal} from 'react-dom';
+import {X} from 'lucide-react';
+import Button from '@/components/ui/Button';
+import IconButton from '@/components/ui/IconButton';
 
 export type GuidePosition =
     'top'
@@ -38,23 +40,33 @@ interface GuideTourProps {
  *                           position, and properties for spotlight rendering.
  * @return {string} The CSS background string representing the spotlight effect.
  */
+function getOverlayColor(opacity: number): string {
+    const style: CSSStyleDeclaration = getComputedStyle(document.documentElement);
+    const darkest: string = style.getPropertyValue('--theme-darkest-background').trim() || '#1A1A1A';
+    const hex: string = darkest.replace('#', '');
+    const r: number = parseInt(hex.substring(0, 2), 16);
+    const g: number = parseInt(hex.substring(2, 4), 16);
+    const b: number = parseInt(hex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+
 function getSpotlightBackground(step: GuideStep): string {
   if (step.x !== undefined && step.y !== undefined) {
-    return 'rgba(0, 0, 0, 0.5)';
+      return getOverlayColor(0.5);
   }
   if (!step.targetSelector) {
-    return 'rgba(0, 0, 0, 0.5)';
+      return getOverlayColor(0.5);
   }
-  const element = document.querySelector(step.targetSelector) as HTMLElement | null;
+  const element: HTMLElement | null = document.querySelector<HTMLElement>(step.targetSelector);
   if (!element) {
-    return 'rgba(0, 0, 0, 0.5)';
+      return getOverlayColor(0.5);
   }
   const rect: DOMRect = element.getBoundingClientRect();
   const centerX: number = rect.left + rect.width / 2;
   const centerY: number = rect.top + rect.height / 2;
   const radius: number = Math.max(rect.width, rect.height) / 2 + (step.highlightRadius || 10);
-  
-  return `radial-gradient(circle at ${centerX}px ${centerY}px, transparent ${radius}px, rgba(0, 0, 0, 0.65) ${radius + 20}px)`;
+
+    return `radial-gradient(circle at ${centerX}px ${centerY}px, transparent ${radius}px, ${getOverlayColor(0.65)} ${radius + 20}px)`;
 }
 
 /**
@@ -63,7 +75,13 @@ function getSpotlightBackground(step: GuideStep): string {
  * @param {GuideStep} step - An object containing the configuration for positioning the popover, including its x and y coordinates, target selector, and preferred position.
  * @return {React.CSSProperties} An object representing the CSS properties to position the popover, including `left`, `top`, and optionally `transform` values.
  */
-function getPopoverPosition(step: GuideStep): React.CSSProperties {
+interface PopoverPosition {
+    left: string;
+    top: string;
+    transform?: string;
+}
+
+function getPopoverPosition(step: GuideStep): PopoverPosition {
   if (step.x !== undefined && step.y !== undefined) {
     return {
       left: `${step.x}%`,
@@ -80,7 +98,7 @@ function getPopoverPosition(step: GuideStep): React.CSSProperties {
     };
   }
   
-  const element = document.querySelector(step.targetSelector) as HTMLElement | null;
+  const element: HTMLElement | null = document.querySelector<HTMLElement>(step.targetSelector);
   if (!element) {
     return {
       left: '50%',
@@ -88,12 +106,12 @@ function getPopoverPosition(step: GuideStep): React.CSSProperties {
       transform: 'translate(-50%, -50%)'
     };
   }
-  
+
   const rect: DOMRect = element.getBoundingClientRect();
   const {left, top, width, height} = rect;
-  const popoverWidth = 420;
-  const popoverHeight = 300;
-  const margin = 20;
+  const popoverWidth: number = 420;
+  const popoverHeight: number = 300;
+  const margin: number = 20;
   const position: GuidePosition = step.position || 'auto';
   
   switch (position) {
@@ -188,16 +206,17 @@ export default function GuideTour({stepId, steps, onClose, onComplete}: GuideTou
   const [currentStep, setCurrentStep] = useState<number>(0);
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const [rendered, setRendered] = useState<boolean>(false);
+  const overlayRef: React.RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
   
-  const filteredSteps: GuideStep[] = useMemo((): GuideStep[] => {
+  const filteredSteps: GuideStep[] = React.useMemo((): GuideStep[] => {
     return steps.filter((step: GuideStep): boolean => step.id >= stepId);
   }, [steps, stepId]);
   
   const currentStepData: GuideStep = filteredSteps[currentStep];
   
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const timeoutRef: React.RefObject<NodeJS.Timeout | null> = useRef<NodeJS.Timeout | null>(null);
   
-  const showStep = (index: number) => {
+  function showStep(index: number): void {
     setIsVisible(false);
     
     if (timeoutRef.current) {
@@ -210,7 +229,7 @@ export default function GuideTour({stepId, steps, onClose, onComplete}: GuideTou
       
       const step: GuideStep = filteredSteps[index];
       if (step?.targetSelector) {
-        const element = document.querySelector(step.targetSelector) as HTMLElement;
+        const element: HTMLElement | null = document.querySelector<HTMLElement>(step.targetSelector);
         if (element) {
           element.scrollIntoView({behavior: 'smooth', block: 'center'});
         }
@@ -224,42 +243,46 @@ export default function GuideTour({stepId, steps, onClose, onComplete}: GuideTou
         }, 50);
       }, 600);
     }, 200);
-  };
+  }
   
   useEffect((): () => void => {
     showStep(0);
-    
+
     return (): void => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
     };
   }, []);
+    
+    useEffect((): void => {
+        if (overlayRef.current) {
+            overlayRef.current.style.background = rendered ? getSpotlightBackground(currentStepData) : getOverlayColor(0.5);
+            overlayRef.current.style.opacity = isVisible ? '1' : '0';
+        }
+    }, [rendered, isVisible, currentStepData]);
   
-  const handleNext: () => void = (): void => {
+  function handleNext(): void {
     if (currentStep < filteredSteps.length - 1) {
       showStep(currentStep + 1);
     } else {
       onComplete();
     }
-  };
+  }
   
-  const handlePrevious: () => void = (): void => {
+  function handlePrevious(): void {
     if (currentStep > 0) {
       showStep(currentStep - 1);
     }
-  };
+  }
   if (!filteredSteps.length || !currentStepData) {
     return null;
   }
-  return (
-      <div className="fixed inset-0 z-50 font-['Lora']">
+    return createPortal(
+        <div className="fixed inset-0 z-[60] font-['Lora']">
         <div
+            ref={overlayRef}
             className="absolute inset-0 transition-opacity duration-500"
-            style={{
-              background: rendered ? getSpotlightBackground(currentStepData) : 'rgba(0, 0, 0, 0.5)',
-              opacity: isVisible ? 1 : 0
-            }}
             onClick={onClose}
         />
         {rendered && (
@@ -273,7 +296,8 @@ export default function GuideTour({stepId, steps, onClose, onComplete}: GuideTou
                 onClose={onClose}
             />
         )}
-      </div>
+        </div>,
+        document.body
   );
 }
 
@@ -309,18 +333,25 @@ function GuidePopup(
       onNext: () => void;
       onClose: () => void;
     }): JSX.Element {
-  const positionStyle = useMemo(() => {
-    return getPopoverPosition(step);
+  const popupRef: React.RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
+    
+    useEffect((): void => {
+        if (popupRef.current) {
+            const pos: PopoverPosition = getPopoverPosition(step);
+            popupRef.current.style.left = pos.left;
+            popupRef.current.style.top = pos.top;
+            popupRef.current.style.transform = pos.transform || '';
+        }
   }, [step]);
-  
-  return (
+    
+    return (
       <div
-          className={`absolute bg-tertiary border border-primary/30 rounded-xl shadow-2xl w-96 transition-all duration-300 ${
-              isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-95'
+          ref={popupRef}
+          className={`absolute bg-tertiary border border-primary/30 rounded-xl w-96 transition-opacity duration-300 ${
+              isVisible ? 'opacity-100' : 'opacity-0'
           }`}
-          style={positionStyle}
       >
-        <div className="px-8 py-6 border-b border-secondary/40">
+          <div className="px-8 py-6 border-b border-secondary">
           <div className="flex items-start justify-between">
             <div className="flex-1 mr-6">
                 <h3 className="text-text-primary font-semibold text-xl mb-3">
@@ -331,24 +362,18 @@ function GuidePopup(
                 Étape {currentStep + 1} sur {totalSteps}
               </span>
                 <div className="flex items-center space-x-2">
-                  {Array.from({length: totalSteps}).map((_, index) => (
+                  {Array.from({length: totalSteps}).map((_: unknown, index: number) => (
                       <div
                           key={index}
                           className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
-                              index <= currentStep ? 'bg-primary scale-110' : 'bg-secondary/60'
+                              index <= currentStep ? 'bg-primary' : 'bg-secondary'
                           }`}
                       />
                   ))}
                 </div>
               </div>
             </div>
-            <button
-                onClick={onClose}
-                className="text-muted hover:text-text-primary transition-colors p-2 hover:bg-secondary/30 rounded-lg"
-                type="button"
-            >
-              <FontAwesomeIcon icon={faXmark} className="text-lg"/>
-            </button>
+            <IconButton icon={X} variant="ghost" shape="square" onClick={onClose}/>
           </div>
         </div>
         <div className="px-8 py-8">
@@ -356,26 +381,18 @@ function GuidePopup(
             {step.content}
           </div>
         </div>
-        <div className="px-8 py-6 bg-secondary/20 border-t border-secondary/30 rounded-b-xl">
+          <div className="px-8 py-6 bg-tertiary border-t border-secondary rounded-b-xl">
           <div className="flex items-center justify-between">
             {currentStep > 0 ? (
-                <button
-                    onClick={onPrevious}
-                    className="text-muted hover:text-text-primary text-sm px-4 py-2 rounded-lg hover:bg-secondary/30 transition-all"
-                    type="button"
-                >
+                <Button variant="ghost" size="sm" onClick={onPrevious}>
                   ← Précédent
-                </button>
+                </Button>
             ) : (
                 <div></div>
             )}
-            <button
-                onClick={onNext}
-                className="bg-primary hover:bg-primary-dark text-text-primary px-6 py-3 rounded-lg transition-all duration-200 text-sm font-medium shadow-lg hover:shadow-xl transform hover:scale-105"
-                type="button"
-            >
+              <Button variant="primary" onClick={onNext}>
               {currentStep === totalSteps - 1 ? '🎉 Terminer' : 'Continuer →'}
-            </button>
+              </Button>
           </div>
         </div>
       </div>
diff --git a/components/ListItem.tsx b/components/ListItem.tsx
deleted file mode 100644
index cd718d5..0000000
--- a/components/ListItem.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faArrowDown, faArrowUp, faCheck, faPen, faTrash, faX, IconDefinition} from "@fortawesome/free-solid-svg-icons";
-import {ChangeEvent, useState} from "react";
-import TextInput from "@/components/form/TextInput";
-
-interface ListItemProps {
-    onClick: () => void;
-    selectedId: number | string;
-    id: number | string;
-    icon?: IconDefinition;
-    numericalIdentifier?: number;
-    isEditable?: boolean;
-    text: string;
-    handleDelete?: (itemId: string) => void;
-    handleUpdate?: (itemId: string, newValue: string, subNewValue: number) => void;
-}
-
-export default function ListItem(
-    {
-        text,
-        selectedId,
-        id,
-        icon,
-        onClick,
-        isEditable = false,
-        handleDelete,
-        numericalIdentifier,
-        handleUpdate
-    }: ListItemProps) {
-    
-    const [itemHover, setItemHover] = useState<boolean>(false);
-    const [editMode, setEditMode] = useState<boolean>(false);
-    
-    const [newName, setNewName] = useState<string>('');
-    const [newChapterOrder, setNewChapterOrder] = useState<number>(numericalIdentifier ?? 0);
-    
-    function handleEdit(itemName: string): void {
-        setNewName(itemName)
-        setEditMode(true)
-    }
-    
-    function handleSave(): void {
-        if (!handleUpdate) return;
-        handleUpdate(id as string, newName, newChapterOrder)
-        setEditMode(false);
-    }
-    
-    
-    function moveItem(direction: "up" | "down"): void {
-        switch (direction) {
-            case "up":
-                if (newChapterOrder > 0) {
-                    setNewChapterOrder(newChapterOrder - 1)
-                }
-                break;
-            case "down":
-                if (newChapterOrder < 100) {
-                    setNewChapterOrder(newChapterOrder + 1)
-                }
-                break;
-            default:
-                break;
-        }
-    }
-    
-    return (
-        <li onMouseOver={(): void => setItemHover(true)} onMouseLeave={(): void => setItemHover(false)}
-            className={`group relative flex items-center p-3 rounded-xl transition-colors duration-200 border-l-4 ${
-                selectedId === id
-                    ? 'bg-secondary border-primary'
-                    : 'bg-secondary/50 hover:bg-secondary border-transparent'
-            }`}>
-            {
-                (numericalIdentifier != null && newChapterOrder >= 0) && (
-                    <span className="text-primary font-bold mr-3 text-sm min-w-[24px]">
-                        {newChapterOrder >= 0 ? newChapterOrder : numericalIdentifier}.
-                    </span>
-                )
-            }
-            {
-                icon && (
-                    <div className="mr-3 w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
-                        <FontAwesomeIcon icon={icon} className={'w-4 h-4 text-primary'}/>
-                    </div>
-                )
-            }
-            <div className={'flex justify-between items-center w-full gap-2'}>
-                {
-                    editMode ? (
-                        <div className={'flex gap-2 w-full items-center'}>
-                            <div className="flex-1">
-                                <TextInput
-                                    value={newName ? newName : text}
-                                    setValue={(e: ChangeEvent<HTMLInputElement>): void => setNewName(e.target.value)}
-                                    placeholder=""
-                                />
-                            </div>
-                            <button
-                                className={`p-2 rounded-lg transition-all ${
-                                    numericalIdentifier === 0
-                                        ? 'text-muted opacity-40 cursor-not-allowed'
-                                        : 'text-text-primary hover:text-primary hover:bg-primary/10'
-                                }`}
-                                onClick={(): void => moveItem('up')}
-                                disabled={numericalIdentifier === 0}
-                            >
-                                <FontAwesomeIcon icon={faArrowUp} size="sm"/>
-                            </button>
-                            <button
-                                className="p-2 rounded-lg text-text-primary hover:text-primary hover:bg-primary/10 transition-all"
-                                onClick={(): void => moveItem("down")}
-                            >
-                                <FontAwesomeIcon icon={faArrowDown} size="sm"/>
-                            </button>
-                        </div>
-                    ) : (
-                        <span
-                            className={'cursor-pointer text-sm font-medium flex-1 group-hover:text-text-primary transition-colors'}
-                            onClick={onClick}>{text}</span>
-                    )
-                }
-                {
-                    !editMode && isEditable && (
-                        <div
-                            className={'absolute right-1 flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity'}>
-                            <button onClick={(): void => handleEdit(text)}
-                                    className="p-1 rounded-lg bg-secondary hover:bg-primary/10 transition-colors">
-                                <FontAwesomeIcon icon={faPen} className={'w-3.5 h-3.5 text-primary'}/>
-                            </button>
-                            <button onClick={(): void | undefined => handleDelete && handleDelete(id.toString())}
-                                    className="p-1 rounded-lg bg-secondary hover:bg-error/10 transition-colors">
-                                <FontAwesomeIcon icon={faTrash} className={'w-3.5 h-3.5 text-error'}/>
-                            </button>
-                        </div>
-                    )
-                }
-                {
-                    editMode && isEditable && (
-                        <div className={'flex gap-1'}>
-                            <button onClick={handleSave}
-                                    className="p-2 rounded-lg hover:bg-primary/10 transition-all">
-                                <FontAwesomeIcon icon={faCheck} className={'w-3.5 h-3.5 text-primary'}/>
-                            </button>
-                            <button onClick={(): void => setEditMode(false)}
-                                    className="p-2 rounded-lg hover:bg-error/10 transition-all">
-                                <FontAwesomeIcon icon={faX} className={'w-3.5 h-3.5 text-error'}/>
-                            </button>
-                        </div>
-                    )
-                }
-            </div>
-        </li>
-    )
-}
diff --git a/components/Modal.tsx b/components/Modal.tsx
deleted file mode 100644
index 65c08d9..0000000
--- a/components/Modal.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, {ReactNode, useEffect, useState} from 'react';
-import {createPortal} from 'react-dom';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faX} from "@fortawesome/free-solid-svg-icons";
-
-interface ModalProps {
-    title: string;
-    children: ReactNode;
-    size: 'small' | 'medium' | 'large';
-    onClose: () => void;
-    onConfirm: () => void;
-    confirmText?: string;
-    cancelText?: string;
-    enableFooter?: boolean;
-    enableOverflow?: boolean;
-}
-
-export default function Modal(
-    {
-        title,
-        children,
-        size,
-        onClose,
-        onConfirm,
-        confirmText = 'Confirm',
-        cancelText = 'Cancel',
-        enableFooter = true,
-        enableOverflow = true,
-    }: ModalProps) {
-    const [mounted, setMounted] = useState(false);
-    
-    useEffect(() => {
-        setMounted(true);
-        return () => setMounted(false);
-    }, []);
-
-    function getSizeClasses(size: 'small' | 'medium' | 'large'): string {
-        switch (size) {
-            case 'small':
-                return 'w-1/4';
-            case 'medium':
-                return 'w-1/2';
-            case 'large':
-                return 'w-3/4';
-            default:
-                return 'w-1/2';
-        }
-    }
-    
-    const modalContent = (
-        <div
-            className="fixed inset-0 z-40 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md animate-fadeIn">
-            <div
-                className={`relative bg-tertiary text-text-primary rounded-2xl border border-secondary/50 shadow-2xl max-h-[90vh] overflow-hidden flex flex-col ${getSizeClasses(size)}`}>
-                <div
-                    className="flex justify-between items-center bg-primary px-6 py-4 rounded-t-2xl shadow-lg border-b border-primary-dark">
-                    <h2 className="font-['ADLaM_Display'] text-xl tracking-wide">{title}</h2>
-                    <button
-                        className="group text-white/80 hover:text-white p-2 rounded-lg hover:bg-white/10 transition-all hover:scale-110"
-                        onClick={onClose}>
-                        <FontAwesomeIcon icon={faX} className={'w-5 h-5 transition-transform group-hover:rotate-90'}/>
-                    </button>
-                </div>
-                <div className={`flex-1 ${enableOverflow ? 'overflow-auto' : 'overflow-hidden'}`}>
-                    {children}
-                </div>
-                {
-                    enableFooter && (
-                        <div
-                            className="flex justify-end gap-3 px-6 py-4 border-t border-secondary/50 bg-dark-background/30">
-                            <button
-                                onClick={onClose}
-                                className="px-5 py-2.5 rounded-lg bg-secondary/50 text-text-primary hover:bg-secondary border border-secondary/50 hover:border-primary/30 transition-all hover:shadow-md hover:scale-105"
-                            >
-                                {cancelText || 'Annuler'}
-                            </button>
-                            <button
-                                onClick={onConfirm}
-                                className="px-5 py-2.5 rounded-lg bg-primary text-text-primary hover:bg-primary-dark shadow-md hover:shadow-lg hover:shadow-primary/30 transition-all hover:scale-105"
-                            >
-                                {confirmText || 'Confirmer'}
-                            </button>
-                        </div>
-                    )
-                }
-            </div>
-        </div>
-    );
-    
-    if (!mounted) return null;
-    
-    return createPortal(modalContent, document.body);
-}
diff --git a/components/NoPicture.tsx b/components/NoPicture.tsx
deleted file mode 100644
index 05fc915..0000000
--- a/components/NoPicture.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {useContext} from "react";
-import {SessionContext} from "@/context/SessionContext";
-
-export default function NoPicture() {
-    const {session} = useContext(SessionContext);
-    return (
-        <div
-            className="bg-primary text-text-primary rounded-full w-8 h-8 border-2 border-primary-dark hover:bg-primary-dark flex items-center justify-center text-sm font-semibold transition-all duration-200 hover:scale-110 shadow-md hover:shadow-lg">
-            <span>{session.user?.name && session.user.name.charAt(0).toUpperCase()}</span>
-            <span>{session.user?.lastName && session.user.lastName.charAt(0).toUpperCase()}</span>
-        </div>
-    )
-}
diff --git a/components/PanelHeader.tsx b/components/PanelHeader.tsx
deleted file mode 100644
index fc8728c..0000000
--- a/components/PanelHeader.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faSave, faX} from "@fortawesome/free-solid-svg-icons";
-import React from "react";
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
-
-interface PanelHeaderProps {
-    title: string;
-    badge?: string;
-    description: string;
-    icon?: IconDefinition;
-    callBackAction?: () => Promise<void>;
-    secondActionIcon?: IconDefinition;
-    secondActionCallback?: () => Promise<void>;
-    actionIcon?: IconDefinition;
-    actionText?: string;
-}
-
-export default function PanelHeader(
-    {
-        title,
-        badge,
-        description,
-        icon,
-        callBackAction,
-        secondActionCallback,
-        secondActionIcon = faSave,
-        actionIcon = faX,
-        actionText
-    }: PanelHeaderProps) {
-    return (
-        <div className={'border-b border-primary/30 shrink-0 bg-gradient-to-r from-dark-background/50 to-transparent'}>
-            <div className="flex justify-between items-center p-4">
-                <div className="flex-1">
-                    <h2 className="text-lg lg:text-xl text-primary font-bold flex items-center gap-3 flex-wrap">
-                        {
-                            icon && (
-                                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
-                                    <FontAwesomeIcon icon={icon} className="text-primary w-5 h-5"/>
-                                </div>
-                            )
-                        }
-                        <span className="tracking-wide">{title}</span>
-                        {
-                            badge &&
-                            <span
-                                className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-full font-medium border border-primary/30">{badge}</span>
-                        }
-                    </h2>
-                    {description && <p className="text-text-secondary text-xs mt-2 ml-13">{description}</p>}
-                </div>
-                <div className="flex items-center gap-2">
-                    {
-                        actionText && (
-                            <button onClick={callBackAction}
-                                    className="group text-text-primary px-4 py-2 text-sm bg-secondary/50 rounded-xl hover:bg-secondary transition-all border border-secondary/50 hover:border-primary/30 flex items-center gap-2 hover:shadow-md hover:scale-105">
-                                <div
-                                    className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center transition-transform group-hover:scale-110">
-                                    <FontAwesomeIcon icon={actionIcon} className="w-4 h-4"/>
-                                </div>
-                                {
-                                    actionText && <span className="font-medium">{actionText}</span>
-                                }
-                            </button>
-                        )
-                    }
-                    {
-                        secondActionCallback && (
-                            <button onClick={secondActionCallback}
-                                    className="group w-10 h-10 bg-primary/10 hover:bg-primary/20 rounded-lg flex items-center justify-center transition-all hover:shadow-md hover:scale-110 border border-primary/30">
-                                <FontAwesomeIcon icon={secondActionIcon}
-                                                 className="w-4 h-4 text-primary transition-transform group-hover:scale-110"/>
-                            </button>
-                        )
-                    }
-                    {
-                        callBackAction && actionIcon && !actionText && (
-                            <button onClick={callBackAction}
-                                    className="group text-muted hover:text-text-primary transition-all hover:scale-110">
-                                <FontAwesomeIcon icon={actionIcon}
-                                                 className={'w-5 h-5 transition-transform group-hover:rotate-90'}/>
-                            </button>
-                        )
-                    }
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/components/QSTextGeneratedPreview.tsx b/components/QSTextGeneratedPreview.tsx
deleted file mode 100644
index 3b45a85..0000000
--- a/components/QSTextGeneratedPreview.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import {ReactPortal, useEffect, useState} from 'react';
-import {createPortal} from 'react-dom';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faPaperPlane, faStop, faSync, faX} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from "next-intl";
-
-interface QSTextGeneratedPreviewProps {
-    onClose: () => void;
-    onRefresh: () => void;
-    value: string;
-    onInsert: () => void;
-    isGenerating?: boolean;
-    onStop?: () => void;
-}
-
-export default function QSTextGeneratedPreview(
-    {
-        onClose,
-        onRefresh,
-        value,
-        onInsert,
-        isGenerating = false,
-        onStop,
-    }: QSTextGeneratedPreviewProps): ReactPortal | null {
-
-    const [mounted, setMounted] = useState(false);
-    const [isVisible, setIsVisible] = useState(false);
-    const t = useTranslations();
-    
-    const filteredValue: string = value.replace(/^starting\.{0,3}\s*/i, '').trim();
-    const hasRealContent: boolean = filteredValue.length > 0;
-
-    useEffect((): () => void => {
-        setMounted(true);
-        const timer = setTimeout(() => setIsVisible(true), 10);
-        return (): void => {
-            setMounted(false);
-            setIsVisible(false);
-            clearTimeout(timer);
-        };
-    }, []);
-    
-    const handleClose = (): void => {
-        setIsVisible(false);
-        setTimeout(onClose, 300); // Attend la fin de l'animation avant de fermer
-    };
-
-    if (!mounted) return null;
-
-    const modalContent = (
-        <div
-            className={`fixed inset-0 z-50 flex items-center justify-center font-['Lora'] transition-opacity duration-300 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
-            <div className="absolute inset-0 bg-overlay" onClick={handleClose}></div>
-            <div
-                className={`relative w-[90%] max-w-2xl h-[80%] bg-tertiary/90 backdrop-blur-sm rounded-2xl overflow-hidden border border-secondary/50 shadow-2xl flex flex-col transition-all duration-300 ${isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0'}`}>
-                <div
-                    className="flex justify-between items-center px-5 py-4 bg-secondary/30 backdrop-blur-sm border-b border-secondary/50 shadow-sm">
-                    <div className="flex items-center">
-                        <h2 className="text-xl font-['ADLaM_Display'] text-text-primary">{t("qsTextPreview.title")}</h2>
-                    </div>
-
-                    <div className="flex items-center space-x-2">
-                        {isGenerating && onStop ? (
-                            <button
-                                onClick={onStop}
-                                className="w-9 h-9 rounded-xl bg-red-500 text-white hover:bg-red-600 transition-all duration-200 hover:scale-110 flex justify-center items-center shadow-sm hover:shadow-md"
-                            >
-                                <FontAwesomeIcon icon={faStop}/>
-                            </button>
-                        ) : (
-                            <button
-                                onClick={onRefresh}
-                                className="w-9 h-9 rounded-xl bg-secondary/50 text-primary hover:bg-secondary transition-all duration-200 hover:scale-110 flex justify-center items-center shadow-sm hover:shadow-md border border-secondary/50"
-                            >
-                                <FontAwesomeIcon icon={faSync}/>
-                            </button>
-                        )}
-                        <button
-                            onClick={handleClose}
-                            className="text-muted hover:text-text-primary p-2 rounded-xl hover:bg-secondary transition-all duration-200 hover:scale-110"
-                        >
-                            <FontAwesomeIcon icon={faX} className={'h-5 w-5'}/>
-                        </button>
-                    </div>
-                </div>
-                <div className="flex-1 p-5 overflow-auto custom-scrollbar">
-                    <div
-                        className="w-full bg-darkest-background text-text-primary p-5 rounded-xl border border-secondary/50 shadow-inner">
-                        {isGenerating && !hasRealContent ? (
-                            <div className="space-y-3 animate-pulse">
-                                <div className="flex flex-wrap gap-2">
-                                    <span className="h-5 bg-primary/20 rounded px-4"></span>
-                                    <span className="h-5 bg-primary/15 rounded px-6"></span>
-                                    <span className="h-5 bg-primary/20 rounded px-3"></span>
-                                    <span className="h-5 bg-primary/10 rounded px-8"></span>
-                                    <span className="h-5 bg-primary/20 rounded px-5"></span>
-                                    <span className="h-5 bg-primary/15 rounded px-4"></span>
-                                    <span className="h-5 bg-primary/20 rounded px-7"></span>
-                                </div>
-                                <div className="flex flex-wrap gap-2">
-                                    <span className="h-5 bg-primary/15 rounded px-5"></span>
-                                    <span className="h-5 bg-primary/20 rounded px-3"></span>
-                                    <span className="h-5 bg-primary/10 rounded px-6"></span>
-                                    <span className="h-5 bg-primary/20 rounded px-4"></span>
-                                    <span className="h-5 bg-primary/15 rounded px-8"></span>
-                                    <span className="h-5 bg-primary/20 rounded px-3"></span>
-                                </div>
-                                <div className="flex flex-wrap gap-2">
-                                    <span className="h-5 bg-primary/20 rounded px-6"></span>
-                                    <span className="h-5 bg-primary/10 rounded px-4"></span>
-                                    <span className="h-5 bg-primary/20 rounded px-5"></span>
-                                    <span className="h-5 bg-primary/15 rounded px-7"></span>
-                                    <span className="h-5 bg-primary/20 rounded px-3"></span>
-                                    <span className="h-5 bg-primary/10 rounded px-5"></span>
-                                    <span className="h-5 bg-primary/20 rounded px-4"></span>
-                                </div>
-                                <div className="flex flex-wrap gap-2">
-                                    <span className="h-5 bg-primary/15 rounded px-4"></span>
-                                    <span className="h-5 bg-primary/20 rounded px-6"></span>
-                                    <span className="h-5 bg-primary/10 rounded px-3"></span>
-                                    <span className="h-5 bg-primary/20 rounded px-5"></span>
-                                    <span className="h-5 bg-primary/15 rounded px-7"></span>
-                                </div>
-                            </div>
-                        ) : (
-                            <div className="space-y-4">
-                                <div className="text-justify leading-relaxed whitespace-pre-wrap fade-in-text">
-                                    {filteredValue}
-                                </div>
-                            </div>
-                        )}
-                    </div>
-                </div>
-                <div
-                    className="px-5 py-4 bg-secondary/30 backdrop-blur-sm border-t border-secondary/50 flex justify-end shadow-inner">
-                    <button
-                        onClick={onInsert}
-                        className="flex items-center py-2.5 px-5 rounded-xl bg-primary text-text-primary hover:bg-primary-dark transition-all duration-200 hover:scale-105 shadow-md hover:shadow-lg font-medium"
-                    >
-                        <FontAwesomeIcon icon={faPaperPlane} className="mr-2"/>
-                        {t("qsTextPreview.insert")}
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
-    
-    return createPortal(modalContent, document.body);
-}
diff --git a/components/ScribeControllerBar.tsx b/components/ScribeControllerBar.tsx
deleted file mode 100644
index 84c7d2c..0000000
--- a/components/ScribeControllerBar.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import React, {useContext, useState} from "react";
-import * as tauri from '@/lib/tauri';
-import {ChapterProps, chapterVersions} from "@/lib/models/Chapter";
-import {ChapterContext} from "@/context/ChapterContext";
-import {BookContext} from "@/context/BookContext";
-import System from "@/lib/models/System";
-import UserMenu from "@/components/UserMenu";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faGear, faGlobe, faHome} from "@fortawesome/free-solid-svg-icons";
-import {SelectBoxProps} from "@/shared/interface";
-import {AlertContext} from "@/context/AlertContext";
-import {SessionContext} from "@/context/SessionContext";
-import Book, {BookProps} from "@/lib/models/Book";
-import BookSetting from "@/components/book/settings/BookSetting";
-import SelectBox from "@/components/form/SelectBox";
-import {useTranslations} from "next-intl";
-import {LangContext, LangContextProps} from "@/context/LangContext";
-import CreditCounter from "@/components/CreditMeters";
-import QuillSense from "@/lib/models/QuillSense";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-
-export default function ScribeControllerBar() {
-    const {chapter, setChapter} = useContext(ChapterContext);
-    const {book, setBook} = useContext(BookContext);
-    const {errorMessage} = useContext(AlertContext)
-    const {session} = useContext(SessionContext);
-    const t = useTranslations();
-    const {lang, setLang} = useContext<LangContextProps>(LangContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext)
-    const {serverSyncedBooks, serverOnlyBooks, localOnlyBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    
-    const isGPTEnabled: boolean = !isCurrentlyOffline() && QuillSense.isOpenAIEnabled(session);
-    const isGemini: boolean = !isCurrentlyOffline() && QuillSense.isOpenAIEnabled(session);
-    const isAnthropic: boolean = !isCurrentlyOffline() && QuillSense.isOpenAIEnabled(session);
-    const isSubTierTwo: boolean = !isCurrentlyOffline() && QuillSense.getSubLevel(session) >= 2;
-    const hasAccess: boolean = (isGPTEnabled || isAnthropic || isGemini) || isSubTierTwo;
-    
-    const [showSettingPanel, setShowSettingPanel] = useState<boolean>(false);
-    
-    async function handleChapterVersionChanged(version: number) {
-        try {
-            let response: ChapterProps | null;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getWholeChapter(chapter?.chapterId ?? '', version, book?.bookId ?? '');
-            } else {
-                response = await System.authGetQueryToServer<ChapterProps>(`chapter/whole`, session.accessToken, lang, {
-                    bookid: book?.bookId,
-                    id: chapter?.chapterId,
-                    version: version,
-                });
-            }
-            if (!response) {
-                errorMessage(t("controllerBar.chapterNotFound"));
-                return;
-            }
-            setChapter(response);
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t("controllerBar.unknownChapterError"));
-            }
-        }
-    }
-    
-    async function getBook(bookId: string): Promise<void> {
-        try {
-            const response: BookProps = await System.authGetQueryToServer<BookProps>(`book/basic-information`, session.accessToken, lang, {
-                id: bookId,
-            });
-            if (!response) {
-                errorMessage(t("controllerBar.bookNotFound"));
-                return;
-            }
-            setBook!!({
-                bookId: response.bookId,
-                type: response.type,
-                title: response.title,
-                subTitle: response.subTitle,
-                summary: response.summary,
-                publicationDate: response.publicationDate,
-                desiredWordCount: response.desiredWordCount,
-                totalWordCount: response.desiredWordCount,
-                quillsenseEnabled: response.quillsenseEnabled,
-                tools: response?.tools,
-                seriesId: response.seriesId,
-            });
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t("controllerBar.unknownBookError"));
-            }
-        }
-    }
-    
-    function handleLanguageChange(language: "fr" | "en"): void {
-        System.setCookie('lang', language, 365);
-        const newLang: "en" | "fr" | null = System.getCookie('lang') as "en" | "fr" | null;
-        if (newLang) {
-            setLang(language);
-        }
-    }
-    
-    return (
-        <div
-            className="flex items-center justify-between px-6 py-3 bg-tertiary/90 backdrop-blur-sm border-b border-secondary/50 shadow-md">
-            <div className="flex items-center space-x-4">
-                <div className="flex items-center gap-2">
-                    {book && (
-                        <button onClick={(): void => setShowSettingPanel(true)}
-                                className="group p-2 rounded-lg text-muted hover:text-text-primary hover:bg-secondary/50 transition-all hover:scale-110">
-                            <FontAwesomeIcon icon={faGear}
-                                             className={'w-5 h-5 transition-transform group-hover:rotate-90'}/>
-                        </button>
-                    )}
-                    {
-                        book && (
-                            <button onClick={(): void => {
-                                setBook && setBook(null)
-                                setChapter && setChapter(undefined)
-                            }}
-                                    className="group p-2 rounded-lg text-muted hover:text-primary hover:bg-secondary/50 transition-all hover:scale-110">
-                                <FontAwesomeIcon icon={faHome}
-                                                 className={'w-5 h-5 transition-transform group-hover:scale-110'}/>
-                            </button>
-                        )
-                    }
-                </div>
-                <div className="min-w-[200px]">
-                    <SelectBox onChangeCallBack={(e) => getBook(e.target.value)}
-                               data={Book.booksToSelectBox([...serverOnlyBooks, ...localOnlyBooks])} defaultValue={book?.bookId}
-                               placeholder={t("controllerBar.selectBook")}/>
-                </div>
-                {chapter && (
-                    <div className="min-w-[180px]">
-                        <SelectBox onChangeCallBack={(e) => handleChapterVersionChanged(parseInt(e.target.value))}
-                                   data={chapterVersions.filter((version: SelectBoxProps): boolean => {
-                                       return !(version.value === '1' && (!hasAccess || book?.quillsenseEnabled === false));
-                                   }).map((version: SelectBoxProps) => {
-                                       return {
-                                           value: version.value.toString(),
-                                           label: t(version.label)
-                                       }
-                                   })} defaultValue={chapter?.chapterContent.version.toString()}/>
-                    </div>
-                )}
-            </div>
-            <div className="flex items-center space-x-4">
-                {
-                    hasAccess && book?.quillsenseEnabled !== false &&
-                    <CreditCounter isCredit={isSubTierTwo}/>
-                }
-                <div
-                    className="flex items-center bg-secondary/50 rounded-xl overflow-hidden border border-secondary shadow-sm">
-                    <div className="flex items-center px-3 py-2 bg-dark-background/50 border-r border-secondary">
-                        <FontAwesomeIcon icon={faGlobe} className="w-4 h-4 text-primary"/>
-                    </div>
-                    <button
-                        onClick={() => handleLanguageChange('fr')}
-                        className={`px-4 py-2 text-sm font-semibold transition-all ${
-                            lang === 'fr'
-                                ? 'bg-primary text-text-primary shadow-md'
-                                : 'bg-transparent text-text-secondary hover:bg-secondary/50 hover:text-text-primary'
-                        }`}
-                    >
-                        FR
-                    </button>
-                    <button
-                        onClick={() => handleLanguageChange('en')}
-                        className={`px-4 py-2 text-sm font-semibold transition-all ${
-                            lang === 'en'
-                                ? 'bg-primary text-text-primary shadow-md'
-                                : 'bg-transparent text-text-secondary hover:bg-secondary/50 hover:text-text-primary'
-                        }`}
-                    >
-                        EN
-                    </button>
-                </div>
-                <UserMenu/>
-            </div>
-            {showSettingPanel && <BookSetting onClose={() => setShowSettingPanel(false)}/>}
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/components/ScribeFooterBar.tsx b/components/ScribeFooterBar.tsx
deleted file mode 100644
index 5ccf2d7..0000000
--- a/components/ScribeFooterBar.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import {ChapterContext} from "@/context/ChapterContext";
-import {EditorContext} from "@/context/EditorContext";
-import {useContext, useEffect, useState} from "react";
-import {Editor} from "@tiptap/react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faBook, faChartSimple, faHeart, faSheetPlastic, faHardDrive} from "@fortawesome/free-solid-svg-icons";
-import {useTranslations} from "next-intl";
-import {AlertContext} from "@/context/AlertContext";
-import {BookContext} from "@/context/BookContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-
-export default function ScribeFooterBar() {
-    const t = useTranslations();
-    const {chapter} = useContext(ChapterContext);
-    const {book} = useContext(BookContext);
-    const editor: Editor | null = useContext(EditorContext).editor;
-    const {errorMessage} = useContext(AlertContext)
-    const {offlineMode} = useContext<OfflineContextType>(OfflineContext)
-    const {localOnlyBooks,serverSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    
-    const [wordsCount, setWordsCount] = useState<number>(0);
-    
-    useEffect((): void => {
-        getWordCount();
-    }, [editor?.state.doc.textContent]);
-    
-    function getWordCount(): void {
-        if (editor) {
-            try {
-                const content: string = editor?.state.doc.textContent;
-                const texteNormalise: string = content
-                    .replace(/'/g, ' ')
-                    .replace(/-/g, ' ')
-                    .replace(/\s+/g, ' ')
-                    .trim();
-                const mots: string[] = texteNormalise.split(' ');
-                const wordCount: number = mots.filter(
-                    (mot: string): boolean => mot.length > 0,
-                ).length;
-                setWordsCount(wordCount);
-            } catch (e: unknown) {
-                if (e instanceof Error) {
-                    errorMessage(t('errors.wordCountError') + ` (${e.message})`);
-                } else {
-                    errorMessage(t('errors.wordCountError'));
-                }
-            }
-        }
-    }
-    
-    return (
-        <div
-            className="px-6 py-3 bg-tertiary/90 backdrop-blur-sm border-t border-secondary/50 text-text-primary flex justify-between items-center shadow-lg">
-            <div>
-                <span className="flex items-center gap-2">
-                    {chapter && (
-                        <span className="inline-flex items-center px-3 py-1 rounded-lg bg-primary/10 border border-primary/30">
-                            <span className="text-primary font-bold text-sm">
-                                {chapter.chapterOrder < 0 ? t('scribeFooterBar.sheet') : `${chapter.chapterOrder}.`}
-                            </span>
-                        </span>
-                    )}
-                    <span className={'flex items-center gap-2 font-medium'}>
-                        {
-                            chapter?.title || book?.title || (
-                            <>
-                                <span>{t('scribeFooterBar.madeWith')}</span>
-                                <FontAwesomeIcon color={'red'} icon={faHeart} className={'w-4 h-4 animate-pulse'}/>
-                            </>
-                        )}
-                    </span>
-                </span>
-            </div>
-            {
-                chapter || book ? (
-                    <div className="flex items-center space-x-3">
-                        <div
-                            className="flex items-center gap-2 bg-secondary/50 px-4 py-2 rounded-xl border border-secondary shadow-sm">
-                            <FontAwesomeIcon icon={faChartSimple} className="text-primary text-sm w-4 h-4"/>
-                            <span className="text-muted text-sm font-medium">{t('scribeFooterBar.words')}:</span>
-                            <span className="text-text-primary font-bold">{wordsCount}</span>
-                        </div>
-                        <div
-                            className="flex items-center gap-2 bg-secondary/50 px-4 py-2 rounded-xl border border-secondary shadow-sm">
-                            <FontAwesomeIcon icon={faSheetPlastic} className={'text-primary w-4 h-4'}/>
-                            <span className="text-text-primary font-bold">{Math.ceil(wordsCount / 300)}</span>
-                        </div>
-                    </div>
-                ) : (
-                    <div className="flex items-center space-x-3">
-                        {
-                            !offlineMode.isOffline && <div
-                                className="flex items-center gap-2 bg-secondary/50 px-4 py-2 rounded-xl border border-secondary shadow-sm">
-                                <FontAwesomeIcon icon={faBook} className={'text-primary w-4 h-4'}/>
-                                <span className="text-text-primary font-bold">{serverSyncedBooks.length}</span>
-                            </div>
-                        }
-                        {(localOnlyBooks.length > 0 || offlineMode.isOffline) && (
-                            <div
-                                className="flex items-center gap-2 bg-secondary/50 px-4 py-2 rounded-xl border border-secondary shadow-sm">
-                                <FontAwesomeIcon icon={faHardDrive} className={'text-primary w-4 h-4'}/>
-                                <span className="text-text-primary font-bold">{localOnlyBooks.length}</span>
-                            </div>
-                        )}
-                    </div>
-                )
-            }
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/components/ScribeTopBar.tsx b/components/ScribeTopBar.tsx
deleted file mode 100644
index e6e8b83..0000000
--- a/components/ScribeTopBar.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// Removed Next.js Image import for Electron
-import {useContext} from "react";
-import {BookContext, BookContextProps} from "@/context/BookContext";
-import {useTranslations} from "next-intl";
-import OfflineToggle from "@/components/offline/OfflineToggle";
-
-export default function ScribeTopBar() {
-    const book: BookContextProps = useContext(BookContext);
-    const t = useTranslations();
-    return (
-        <div className="flex items-center justify-between px-6 py-3 bg-primary shadow-lg border-b border-primary-dark">
-            <div className="flex items-center space-x-4 group">
-                <div className="transition-transform duration-300 group-hover:scale-110">
-                    <img src="/eritors-favicon-white.png" alt={t("scribeTopBar.logoAlt")} style={{width: 24, height: 24}} />
-                </div>
-                <span
-                    className="font-['ADLaM_Display'] text-xl tracking-wide text-white/95">{t("scribeTopBar.scribe")}</span>
-            </div>
-            {book.book && (
-                <div
-                    className="flex items-center space-x-3 bg-white/10 backdrop-blur-sm px-4 py-2 rounded-lg border border-white/20">
-                    <div className="h-8 w-1 bg-white/40 rounded-full"></div>
-                    <div className="text-center">
-                        <p className="text-text-primary font-semibold text-base tracking-wide">
-                            {book.book.title}
-                        </p>
-                        {book.book.subTitle && (
-                            <p className="text-white/70 text-xs italic mt-0.5">
-                                {book.book.subTitle}
-                            </p>
-                        )}
-                    </div>
-                    <div className="h-8 w-1 bg-white/40 rounded-full"></div>
-                </div>
-            )}
-            <div className="flex items-center space-x-2 min-w-[120px] justify-end">
-                <OfflineToggle />
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/components/SettingsPanel.tsx b/components/SettingsPanel.tsx
deleted file mode 100644
index 4dcc8d2..0000000
--- a/components/SettingsPanel.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client'
-import {ReactNode, useEffect, useState} from "react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faX} from "@fortawesome/free-solid-svg-icons";
-import {createPortal} from "react-dom";
-
-interface SettingsPanelProps {
-    title: string;
-    sidebar: ReactNode;
-    children: ReactNode;
-    onClose: () => void;
-}
-
-export default function SettingsPanel({title, sidebar, children, onClose}: SettingsPanelProps) {
-    const [mounted, setMounted] = useState<boolean>(false);
-
-    useEffect((): void => {
-        setMounted(true);
-    }, []);
-
-    if (!mounted) return null;
-
-    return createPortal(
-        <div className="fixed inset-0 z-40 bg-black/60 backdrop-blur-md flex items-center justify-center">
-            <div className="w-3/4 h-[85vh] bg-tertiary rounded-2xl border border-secondary/50 shadow-2xl flex flex-col">
-
-                <div className="bg-primary px-6 py-4 rounded-t-2xl flex justify-between items-center">
-                    <h2 className="font-['ADLaM_Display'] text-xl text-text-primary">{title}</h2>
-                    <button
-                        onClick={onClose}
-                        className="text-white/80 hover:text-white p-2 rounded-lg hover:bg-white/10 transition-all"
-                    >
-                        <FontAwesomeIcon icon={faX} className="w-5 h-5"/>
-                    </button>
-                </div>
-
-                <div className="flex flex-1 overflow-hidden">
-                    <div className="w-64 bg-secondary/30 border-r border-secondary/50">
-                        {sidebar}
-                    </div>
-                    <div className="flex-1 overflow-y-auto">
-                        {children}
-                    </div>
-                </div>
-
-            </div>
-        </div>,
-        document.body
-    );
-}
diff --git a/components/ShortStoryGenerator.tsx b/components/ShortStoryGenerator.tsx
index 5f75e70..00f1e4a 100644
--- a/components/ShortStoryGenerator.tsx
+++ b/components/ShortStoryGenerator.tsx
@@ -1,28 +1,28 @@
-import {ChangeEvent, RefObject, useContext, useEffect, useRef, useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import React, {ChangeEvent, useContext, useEffect, useRef, useState} from 'react';
+import {
+    BarChart2,
+    BookMarked,
+    BookOpen,
+    ChevronRight,
+    Clock,
+    CloudSun,
+    FileText,
+    GraduationCap,
+    Languages,
+    Loader2,
+    LucideIcon,
+    MessageSquare,
+    Music,
+    Pencil,
+    RotateCw,
+    Square,
+    User,
+    UserPen,
+    Wand2,
+    X
+} from 'lucide-react';
+import {writingLevel} from "@/lib/constants/user";
 import {
-    faBookBookmark,
-    faBookOpen,
-    faChartSimple,
-    faChevronRight,
-    faClock,
-    faCloudSun,
-    faComments,
-    faFileLines,
-    faGraduationCap,
-    faLanguage,
-    faMagicWandSparkles,
-    faMusic,
-    faPencilAlt,
-    faRotateRight,
-    faSpinner,
-    faStop,
-    faUserAstronaut,
-    faUserEdit,
-    faX
-} from "@fortawesome/free-solid-svg-icons";
-import {writingLevel} from "@/lib/models/User";
-import Story, {
     advancedDialogueTypes,
     advancedNarrativePersons,
     advancedPredefinedType,
@@ -34,23 +34,27 @@ import Story, {
     intermediatePredefinedType,
     langues,
     verbalTime
-} from '@/lib/models/Story';
+} from '@/lib/constants/story';
+import {presetStoryType} from '@/lib/utils/story';
 import SelectBox from "@/components/form/SelectBox";
 import TextInput from "@/components/form/TextInput";
-import TexteAreaInput from "@/components/form/TexteAreaInput";
-import {SessionContext} from "@/context/SessionContext";
-import System from "@/lib/models/System";
-import {AlertContext} from "@/context/AlertContext";
+import TextAreaInput from "@/components/form/TextAreaInput";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {apiPost} from '@/lib/api/client';
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
 import {configs} from "@/lib/configs";
 import InputField from "@/components/form/InputField";
 import NumberInput from "@/components/form/NumberInput";
+import Button from "@/components/ui/Button";
+import IconButton from "@/components/ui/IconButton";
+import PulseLoader from "@/components/ui/PulseLoader";
 import {Editor as TipEditor, EditorContent, useEditor} from "@tiptap/react";
-import Editor from "@/lib/models/Editor";
+import {convertToHtml} from "@/lib/utils/editor";
 import StarterKit from "@tiptap/starter-kit";
 import Underline from "@tiptap/extension-underline";
 import TextAlign from "@tiptap/extension-text-align";
-import QuillSense from "@/lib/models/QuillSense";
-import {useTranslations} from "next-intl";
+import {getSubLevel, isAnthropicEnabled} from "@/lib/utils/quillsense";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
 import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
 import AdvancedGenerationOptions from "@/components/form/AdvancedGenerationOptions";
@@ -59,33 +63,35 @@ interface ShortStoryGeneratorProps {
     onClose: () => void;
 }
 
+interface TabItem {
+    id: number;
+    label: string;
+    icon: LucideIcon;
+}
+
 export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps) {
-    const {session} = useContext(SessionContext);
-    const {errorMessage, infoMessage} = useContext(AlertContext);
-    const {lang} = useContext<LangContextProps>(LangContext)
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage, infoMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext)
     const t = useTranslations();
-    const {setTotalPrice, setTotalCredits} = useContext<AIUsageContextProps>(AIUsageContext)
+    const {setTotalPrice, setTotalCredits}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext)
     
     const [tone, setTone] = useState<string>('');
     const [atmosphere, setAtmosphere] = useState<string>('');
     const [verbTense, setVerbTense] = useState<string>('0');
     const [person, setPerson] = useState<string>('0');
     const [characters, setCharacters] = useState<string>('');
-    const [language, setLanguage] = useState<string>(
-        session.user?.writingLang.toString() ?? '0',
-    );
+    const [language, setLanguage] = useState<string>(session.user?.writingLang?.toString() ?? '0');
     const [dialogueType, setDialogueType] = useState<string>('0');
     const [wordsCount, setWordsCount] = useState<number>(500)
     const [directives, setDirectives] = useState<string>('');
-    const [authorLevel, setAuthorLevel] = useState<string>(
-        session.user?.writingLevel.toString() ?? '0',
-    );
+    const [authorLevel, setAuthorLevel] = useState<string>(session.user?.writingLevel?.toString() ?? '0');
     const [presetType, setPresetType] = useState<string>('0');
 
     const [activeTab, setActiveTab] = useState<number>(1);
     const [progress, setProgress] = useState<number>(25);
-    const modalRef: RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
     const [isGenerating, setIsGenerating] = useState<boolean>(false);
+    const progressRef = useRef<HTMLDivElement>(null);
 
     const [generatedText, setGeneratedText] = useState<string>('');
     const [generatedStoryTitle, setGeneratedStoryTitle] = useState<string>('');
@@ -98,10 +104,16 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
     const [useExplicit, setUseExplicit] = useState<boolean>(false);
     const [useSmart, setUseSmart] = useState<boolean>(false);
     
-    const isAnthropicEnabled: boolean = QuillSense.isAnthropicEnabled(session);
-    const isSubTierTwo: boolean = QuillSense.getSubLevel(session) >= 2;
-    const hasAccess: boolean = isAnthropicEnabled || isSubTierTwo;
-    
+    useEffect((): void => {
+        if (progressRef.current) {
+            progressRef.current.style.width = `${progress}%`;
+        }
+    }, [progress]);
+
+    const anthropicEnabled: boolean = isAnthropicEnabled(session);
+    const isSubTierTwo: boolean = getSubLevel(session) >= 2;
+    const hasAccess: boolean = anthropicEnabled || isSubTierTwo;
+
     const editor: TipEditor | null = useEditor({
         extensions: [
             StarterKit,
@@ -122,7 +134,7 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
     }, []);
     
     useEffect((): void => {
-        Story.presetStoryType(
+        presetStoryType(
             presetType,
             setTone,
             setAtmosphere,
@@ -140,7 +152,7 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
     
     useEffect((): void => {
         if (editor)
-            editor.commands.setContent(Editor.convertToHtml(generatedText))
+            editor.commands.setContent(convertToHtml(generatedText))
         getWordCount();
     }, [editor, generatedText]);
     
@@ -151,7 +163,7 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
             infoMessage(t("shortStoryGenerator.result.abortSuccess"));
         }
     }
-    
+
     async function handleGeneration(): Promise<void> {
         setIsGenerating(true);
         setGeneratedText('');
@@ -219,12 +231,13 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
                                     totalPrice?: number;
                                     totalCost?: number;
                                 } = JSON.parse(line.slice(6));
-                                
+
                                 if (data.content && data.content !== 'starting') {
                                     accumulatedText += data.content;
                                     setGeneratedText(accumulatedText);
                                 }
                                 
+                                // Le message final du endpoint avec title, totalPrice, useYourKey, totalCost
                                 if (data.title && data.useYourKey !== undefined && data.totalPrice !== undefined) {
                                     setGeneratedStoryTitle(data.title);
                                     if (data.useYourKey) {
@@ -242,7 +255,7 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
                     break;
                 }
             }
-            
+
             setIsGenerating(false);
             setHasGenerated(true);
             setAbortController(null);
@@ -284,10 +297,10 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
     }
 
     async function handleSave(): Promise<void> {
-        let content: string = '';
-        if (editor) content = editor?.state?.doc.toJSON();
+        let content: Record<string, unknown> | string = '';
+        if (editor) content = editor.state.doc.toJSON();
         try {
-            const bookId: string = await System.authPostToServer<string>(
+            const bookId: string = await apiPost<string>(
                 `quillsense/generate/add`,
                 {
                     title: generatedStoryTitle,
@@ -324,106 +337,102 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
     if (!hasAccess) {
         return (
             <div
-                className="fixed inset-0 flex items-center justify-center bg-darkest-background/80 z-50 backdrop-blur-sm">
+                className="fixed inset-0 flex items-center justify-center p-4 bg-darkest-background/60 z-50 backdrop-blur-md animate-fadeIn">
                 <div
-                    className="bg-dark-background text-text-primary rounded-lg border border-secondary shadow-xl w-full max-w-md p-6">
+                    className="relative bg-tertiary text-text-primary rounded-xl overflow-hidden w-full max-w-md p-6">
                     <h2 className="flex items-center font-['ADLaM_Display'] text-xl text-text-primary mb-4">
-                        <FontAwesomeIcon icon={faMagicWandSparkles} className="mr-3 w-5 h-5"/>
+                        <Wand2 className="mr-3 w-5 h-5" strokeWidth={1.75}/>
                         {t("shortStoryGenerator.accessDenied.title")}
                     </h2>
                     <p className="text-text-secondary mb-6">
                         {t("shortStoryGenerator.accessDenied.message")}
                     </p>
-                    <button
-                        onClick={onClose}
-                        className="w-full bg-primary text-text-primary px-4 py-2 rounded-lg hover:bg-primary-dark transition-colors"
-                    >
+                    <Button variant="primary" onClick={onClose} fullWidth>
                         {t("shortStoryGenerator.accessDenied.close")}
-                    </button>
+                    </Button>
                 </div>
             </div>
         );
     }
-    
+
     return (
-        <div className="fixed inset-0 flex items-center justify-center bg-overlay z-40 backdrop-blur-sm">
-            <div ref={modalRef}
-                 className="bg-tertiary/90 backdrop-blur-sm text-text-primary rounded-2xl border border-secondary/50 shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col">
+        <div
+            className="fixed inset-0 flex items-center justify-center p-4 bg-darkest-background/60 z-40 backdrop-blur-md animate-fadeIn">
+            <div
+                className="relative bg-tertiary text-text-primary rounded-xl max-h-[90vh] overflow-hidden flex flex-col w-full max-w-4xl">
                 
-                <div className="flex justify-between items-center bg-primary px-6 py-4 rounded-t-2xl shadow-md">
+                <div className="flex justify-between items-center px-6 py-4">
                     <h2 className="font-['ADLaM_Display'] text-xl text-text-primary flex items-center">
-                        <FontAwesomeIcon icon={faMagicWandSparkles} className="mr-3 w-5 h-5"/>
+                        <Wand2 className="mr-3 w-5 h-5" strokeWidth={1.75}/>
                         {t("shortStoryGenerator.title")}
                     </h2>
-                    <button
-                        className="text-text-primary hover:bg-primary-dark p-2 rounded-xl transition-all duration-200 hover:scale-110"
-                        onClick={onClose}
-                        disabled={isGenerating}
-                    >
-                        <FontAwesomeIcon icon={faX} className="w-5 h-5"/>
-                    </button>
+                    <IconButton icon={X} variant="light" onClick={onClose} disabled={isGenerating}/>
                 </div>
                 
-                <div className="px-6 py-4 border-b border-secondary/50">
-                    <div className="w-full bg-secondary/50 rounded-full h-2.5 shadow-inner">
-                        <div
-                            className="bg-primary h-2.5 rounded-full transition-all duration-300 shadow-sm"
-                            style={{width: `${progress}%`}}
-                        />
+                <div className="flex-1 min-h-0 bg-darkest-background rounded-xl mx-2 flex flex-col overflow-hidden">
+                    <div className="px-4 pt-4 pb-2">
+                        <div className="w-full bg-secondary rounded-full h-2">
+                            <div
+                                ref={progressRef}
+                                className="bg-primary h-2 rounded-full transition-all duration-300"
+                            />
+                        </div>
                     </div>
-                </div>
-                
-                <div className="flex border-b border-secondary/50">
-                    {[
-                        {id: 1, label: t("shortStoryGenerator.tabs.basics"), icon: faBookOpen},
-                        {id: 2, label: t("shortStoryGenerator.tabs.structure"), icon: faUserEdit},
-                        {id: 3, label: t("shortStoryGenerator.tabs.atmosphere"), icon: faCloudSun},
-                        ...(hasGenerated || isGenerating ? [{
-                            id: 4,
-                            label: t("shortStoryGenerator.tabs.result"),
-                            icon: faFileLines
-                        }] : [])
-                    ].map(tab => (
-                        <button
-                            key={tab.id}
-                            onClick={() => setActiveTab(tab.id)}
-                            disabled={isGenerating}
-                            className={`flex items-center px-6 py-3 font-medium transition-colors ${
-                                activeTab === tab.id
-                                    ? 'text-primary border-b-2 border-primary bg-primary/5'
-                                    : 'text-text-secondary hover:text-text-primary'
-                            }`}
-                        >
-                            <FontAwesomeIcon icon={tab.icon} className="mr-2 w-4 h-4"/>
-                            {tab.label}
-                            {tab.id === 4 && isGenerating && !generatedText && (
-                                <FontAwesomeIcon icon={faSpinner} className="ml-2 animate-spin w-4 h-4"/>
-                            )}
-                        </button>
-                    ))}
-                </div>
-                
-                <div className="flex-1">
+
+                    <div className="flex border-b border-secondary">
+                        {([
+                            {id: 1, label: t("shortStoryGenerator.tabs.basics"), icon: BookOpen},
+                            {id: 2, label: t("shortStoryGenerator.tabs.structure"), icon: UserPen},
+                            {id: 3, label: t("shortStoryGenerator.tabs.atmosphere"), icon: CloudSun},
+                            ...(hasGenerated || isGenerating ? [{
+                                id: 4,
+                                label: t("shortStoryGenerator.tabs.result"),
+                                icon: FileText
+                            }] : [])
+                        ] satisfies TabItem[]).map((tab: TabItem): React.JSX.Element => {
+                            const TabIcon: LucideIcon = tab.icon;
+                            return (
+                                <button
+                                    key={tab.id}
+                                    onClick={(): void => setActiveTab(tab.id)}
+                                    disabled={isGenerating}
+                                    className={`flex items-center px-6 py-3 font-medium transition-colors ${
+                                        activeTab === tab.id
+                                            ? 'text-primary border-b-2 border-primary bg-primary/5'
+                                            : 'text-text-secondary hover:text-text-primary'
+                                    }`}
+                                >
+                                    <TabIcon className="mr-2 w-4 h-4" strokeWidth={1.75}/>
+                                    {tab.label}
+                                    {tab.id === 4 && isGenerating && !generatedText && (
+                                        <Loader2 className="ml-2 animate-spin w-4 h-4" strokeWidth={1.75}/>
+                                    )}
+                                </button>
+                            );
+                        })}
+                    </div>
+                    
+                    <div className="flex-1 min-h-0 overflow-auto custom-scrollbar">
                     {activeTab === 1 && (
-                        <div className="p-6 space-y-6">
+                        <div className="p-5 space-y-6">
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                 <InputField
-                                    icon={faGraduationCap}
+                                    icon={GraduationCap}
                                     fieldName={t("shortStoryGenerator.fields.complexity")}
                                     input={
                                         <SelectBox
-                                            onChangeCallBack={(e) => setAuthorLevel(e.target.value)}
+                                            onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setAuthorLevel(e.target.value)}
                                             data={writingLevel}
                                             defaultValue={authorLevel}
                                         />
                                     }
                                 />
                                 <InputField
-                                    icon={faBookOpen}
+                                    icon={BookOpen}
                                     fieldName={t("shortStoryGenerator.fields.preset")}
                                     input={
                                         <SelectBox
-                                            onChangeCallBack={(e) => setPresetType(e.target.value)}
+                                            onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setPresetType(e.target.value)}
                                             data={
                                                 authorLevel === '1'
                                                     ? beginnerPredefinedType
@@ -436,18 +445,18 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
                                     }
                                 />
                                 <InputField
-                                    icon={faLanguage}
+                                    icon={Languages}
                                     fieldName={t("shortStoryGenerator.fields.language")}
                                     input={
                                         <SelectBox
-                                            onChangeCallBack={(e) => setLanguage(e.target.value)}
+                                            onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setLanguage(e.target.value)}
                                             data={langues}
                                             defaultValue={language}
                                         />
                                     }
                                 />
                                 <InputField
-                                    icon={faChartSimple}
+                                    icon={BarChart2}
                                     fieldName={t("shortStoryGenerator.fields.wordCount")}
                                     input={
                                         <NumberInput
@@ -460,27 +469,27 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
                             </div>
                         </div>
                     )}
-                    
+
                     {activeTab === 2 && (
-                        <div className="p-6 space-y-6">
+                        <div className="p-5 space-y-6">
                             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                 <InputField
-                                    icon={faClock}
+                                    icon={Clock}
                                     fieldName={t("shortStoryGenerator.fields.tense")}
                                     input={
                                         <SelectBox
-                                            onChangeCallBack={(e) => setVerbTense(e.target.value)}
+                                            onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setVerbTense(e.target.value)}
                                             data={verbalTime}
                                             defaultValue={verbTense}
                                         />
                                     }
                                 />
                                 <InputField
-                                    icon={faUserEdit}
+                                    icon={UserPen}
                                     fieldName={t("shortStoryGenerator.fields.narrative")}
                                     input={
                                         <SelectBox
-                                            onChangeCallBack={(e) => setPerson(e.target.value)}
+                                            onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setPerson(e.target.value)}
                                             data={
                                                 authorLevel === '1'
                                                     ? beginnerNarrativePersons
@@ -493,13 +502,13 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
                                     }
                                 />
                             </div>
-                            
+
                             <InputField
-                                icon={faComments}
+                                icon={MessageSquare}
                                 fieldName={t("shortStoryGenerator.fields.dialogue")}
                                 input={
                                     <SelectBox
-                                        onChangeCallBack={(e) => setDialogueType(e.target.value)}
+                                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setDialogueType(e.target.value)}
                                         data={
                                             authorLevel === '1'
                                                 ? beginnerDialogueTypes
@@ -511,12 +520,12 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
                                     />
                                 }
                             />
-                            
+
                             <InputField
-                                icon={faPencilAlt}
+                                icon={Pencil}
                                 fieldName={t("shortStoryGenerator.fields.directives")}
                                 input={
-                                    <TexteAreaInput
+                                    <TextAreaInput
                                         value={directives}
                                         setValue={(e: ChangeEvent<HTMLTextAreaElement>) => setDirectives(e.target.value)}
                                         placeholder={t("shortStoryGenerator.placeholders.directives")}
@@ -525,39 +534,35 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
                             />
                         </div>
                     )}
-                    
+
                     {activeTab === 3 && (
-                        <div className="p-6 space-y-6">
-                            <div className="space-y-4">
-                                <InputField
-                                    icon={faMusic}
-                                    fieldName={t("shortStoryGenerator.fields.tone")}
-                                    input={
-                                        <TextInput
-                                            value={tone}
-                                            setValue={(e: ChangeEvent<HTMLInputElement>) => setTone(e.target.value)}
-                                            placeholder={t("shortStoryGenerator.placeholders.tone")}
-                                        />
-                                    }
-                                />
-                            </div>
-                            
-                            <div className="space-y-4">
-                                <InputField
-                                    icon={faCloudSun}
-                                    fieldName={t("shortStoryGenerator.fields.atmosphere")}
-                                    input={
-                                        <TextInput
-                                            value={atmosphere}
-                                            setValue={(e: ChangeEvent<HTMLInputElement>) => setAtmosphere(e.target.value)}
-                                            placeholder={t("shortStoryGenerator.placeholders.atmosphere")}
-                                        />
-                                    }
-                                />
-                            </div>
+                        <div className="p-5 space-y-6">
+                            <InputField
+                                icon={Music}
+                                fieldName={t("shortStoryGenerator.fields.tone")}
+                                input={
+                                    <TextInput
+                                        value={tone}
+                                        setValue={(e: ChangeEvent<HTMLInputElement>) => setTone(e.target.value)}
+                                        placeholder={t("shortStoryGenerator.placeholders.tone")}
+                                    />
+                                }
+                            />
                             
                             <InputField
-                                icon={faUserAstronaut}
+                                icon={CloudSun}
+                                fieldName={t("shortStoryGenerator.fields.atmosphere")}
+                                input={
+                                    <TextInput
+                                        value={atmosphere}
+                                        setValue={(e: ChangeEvent<HTMLInputElement>) => setAtmosphere(e.target.value)}
+                                        placeholder={t("shortStoryGenerator.placeholders.atmosphere")}
+                                    />
+                                }
+                            />
+
+                            <InputField
+                                icon={User}
                                 fieldName={t("shortStoryGenerator.fields.character")}
                                 input={
                                     <TextInput
@@ -576,120 +581,75 @@ export default function ShortStoryGenerator({onClose}: ShortStoryGeneratorProps)
                             />
                         </div>
                     )}
-                    
+
                     {activeTab === 4 && (
-                        <div className="p-6">
+                        <div className="p-5">
                             <div className="flex justify-between items-center mb-4">
                                 <h3 className="font-semibold text-lg">
                                     {generatedStoryTitle || t("shortStoryGenerator.result.title")}
                                 </h3>
-                                
+
                                 <div className="flex items-center space-x-2">
                                     {isGenerating ? (
-                                        <button
-                                            onClick={handleStopGeneration}
-                                            className="p-2 rounded-xl bg-red-500 hover:bg-red-600 transition-all duration-200 hover:scale-110 shadow-md"
-                                            title={t("shortStoryGenerator.actions.stop")}
-                                        >
-                                            <FontAwesomeIcon icon={faStop} className="w-4 h-4"/>
-                                        </button>
+                                        <IconButton icon={Square} variant="danger" onClick={handleStopGeneration}
+                                                    tooltip={t("shortStoryGenerator.actions.stop")}/>
                                     ) : generatedText && (
                                         <>
-                                            <button
-                                                onClick={handleGeneration}
-                                                className="p-2 rounded-xl bg-secondary/50 hover:bg-secondary transition-all duration-200 hover:scale-110 shadow-sm border border-secondary/50"
-                                                title={t("shortStoryGenerator.actions.regenerate")}
-                                            >
-                                                <FontAwesomeIcon icon={faRotateRight} className="w-4 h-4"/>
-                                            </button>
-                                            <button
-                                                onClick={handleSave}
-                                                className="p-2 rounded-xl bg-primary hover:bg-primary-dark transition-all duration-200 hover:scale-110 shadow-md"
-                                                title={t("shortStoryGenerator.actions.save")}
-                                            >
-                                                <FontAwesomeIcon icon={faBookBookmark} className="w-4 h-4"/>
-                                            </button>
+                                            <IconButton icon={RotateCw} variant="muted" onClick={handleGeneration}
+                                                        tooltip={t("shortStoryGenerator.actions.regenerate")}/>
+                                            <IconButton icon={BookMarked} variant="primary" onClick={handleSave}
+                                                        tooltip={t("shortStoryGenerator.actions.save")}/>
                                         </>
                                     )}
                                 </div>
                             </div>
-                            
+
                             {isGenerating && !generatedText ? (
-                                <div className="flex flex-col items-center justify-center py-20">
-                                    <FontAwesomeIcon icon={faSpinner}
-                                                     className="animate-spin text-primary mb-4 w-8 h-8"/>
-                                    <p className="text-text-secondary">{t("shortStoryGenerator.result.generating")}</p>
-                                </div>
+                                <PulseLoader text={t("shortStoryGenerator.result.generating")} size="lg"/>
                             ) : (
                                 <div
-                                    className="bg-darkest-background rounded-lg p-6 overflow-auto max-h-96 fade-in-text">
+                                    className="rounded-lg p-6 overflow-auto max-h-96 fade-in-text">
                                     <EditorContent editor={editor} className="prose prose-invert max-w-none"/>
                                 </div>
                             )}
-                            
+
                             {generatedText && (
                                 <div className="flex justify-between items-center mt-4 pt-4 border-t border-secondary">
                                     <div className="flex items-center text-sm text-text-secondary">
-                                        <FontAwesomeIcon icon={faChartSimple} className="mr-2 w-4 h-4"/>
+                                        <BarChart2 className="mr-2 w-4 h-4" strokeWidth={1.75}/>
                                         {totalWordsCount} {t("shortStoryGenerator.result.words")}
                                     </div>
                                 </div>
                             )}
                         </div>
                     )}
+                    </div>
                 </div>
                 
-                <div
-                    className="flex justify-between items-center p-6 border-t border-secondary/50 bg-secondary/30 backdrop-blur-sm shadow-inner">
-                    <button
-                        onClick={() => setActiveTab(Math.max(1, activeTab - 1))}
-                        className={`px-4 py-2 rounded-xl transition-all duration-200 flex items-center ${
-                            activeTab > 1 && !isGenerating
-                                ? 'text-text-secondary hover:text-text-primary hover:bg-secondary hover:scale-105 shadow-sm'
-                                : 'text-muted cursor-not-allowed'
-                        }`}
-                        disabled={activeTab === 1 || isGenerating}
-                    >
-                        <FontAwesomeIcon icon={faChevronRight} className="mr-2 rotate-180 w-4 h-4"/>
+                <div className="flex justify-between items-center px-6 py-4">
+                    <Button variant="ghost" onClick={(): void => setActiveTab(Math.max(1, activeTab - 1))}
+                            disabled={activeTab === 1 || isGenerating}>
+                        <ChevronRight className="rotate-180 w-4 h-4" strokeWidth={1.75}/>
                         {t("shortStoryGenerator.navigation.previous")}
-                    </button>
-                    
+                    </Button>
+
                     <div className="flex items-center space-x-3">
-                        <button
-                            onClick={onClose}
-                            className="px-6 py-2.5 rounded-xl bg-secondary/50 text-text-primary hover:bg-secondary transition-all duration-200 hover:scale-105 shadow-sm border border-secondary/50 font-medium"
-                            disabled={isGenerating}
-                        >
+                        <Button variant="secondary" onClick={onClose} disabled={isGenerating}>
                             {activeTab === 4 && hasGenerated ? t("shortStoryGenerator.navigation.close") : t("shortStoryGenerator.navigation.cancel")}
-                        </button>
-                        
+                        </Button>
+
                         {activeTab < 3 ? (
-                            <button
-                                onClick={() => setActiveTab(activeTab + 1)}
-                                disabled={isGenerating}
-                                className="px-6 py-2.5 rounded-xl bg-primary text-text-primary hover:bg-primary-dark transition-all duration-200 hover:scale-105 flex items-center disabled:opacity-50 shadow-md hover:shadow-lg font-medium"
-                            >
+                            <Button variant="primary" onClick={(): void => setActiveTab(activeTab + 1)}
+                                    disabled={isGenerating}>
                                 {t("shortStoryGenerator.navigation.next")}
-                                <FontAwesomeIcon icon={faChevronRight} className="ml-2 w-4 h-4"/>
-                            </button>
+                                <ChevronRight className="w-4 h-4" strokeWidth={1.75}/>
+                            </Button>
                         ) : activeTab === 3 && (
-                            <button
-                                onClick={handleGeneration}
-                                disabled={isGenerating}
-                                className="px-6 py-2.5 rounded-xl bg-primary text-text-primary hover:bg-primary-dark transition-all duration-200 hover:scale-105 flex items-center disabled:opacity-50 shadow-md hover:shadow-lg font-medium"
-                            >
-                                {isGenerating ? (
-                                    <>
-                                        <FontAwesomeIcon icon={faSpinner} className="animate-spin mr-2 w-4 h-4"/>
-                                        {t("shortStoryGenerator.actions.generating")}
-                                    </>
-                                ) : (
-                                    <>
-                                        <FontAwesomeIcon icon={faMagicWandSparkles} className="mr-2 w-4 h-4"/>
-                                        {t("shortStoryGenerator.actions.generate")}
-                                    </>
-                                )}
-                            </button>
+                            <Button variant="primary" icon={Wand2} onClick={handleGeneration}
+                                    disabled={isGenerating} isLoading={isGenerating}
+                                    loadingText={t("shortStoryGenerator.actions.generating")}>
+                                {t("shortStoryGenerator.actions.generate")}
+                            </Button>
                         )}
                     </div>
                 </div>
diff --git a/components/StaticAlert.tsx b/components/StaticAlert.tsx
deleted file mode 100644
index 0e91b92..0000000
--- a/components/StaticAlert.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-'use client'
-import {useEffect, useState, useRef} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {
-    faCheckCircle,
-    faExclamationCircle,
-    faInfoCircle,
-    faTimes,
-    faTimesCircle
-} from '@fortawesome/free-solid-svg-icons';
-
-interface StaticAlertProps {
-    type: 'success' | 'error' | 'info' | 'warning';
-    message: string;
-    onClose: () => void;
-}
-
-const iconMap = {
-    success: faCheckCircle,
-    error: faExclamationCircle,
-    info: faInfoCircle,
-    warning: faTimesCircle,
-};
-
-const bgColorMap = {
-    success: 'bg-success',
-    error: 'bg-error',
-    info: 'bg-info',
-    warning: 'bg-warning',
-};
-
-export default function StaticAlert(
-    {type, message, onClose}: StaticAlertProps) {
-    const [visible, setVisible] = useState(false);
-    const onCloseRef = useRef(onClose);
-    
-    useEffect(() => {
-        onCloseRef.current = onClose;
-    }, [onClose]);
-
-    useEffect(() => {
-        setVisible(true);
-        const timer = setTimeout(() => {
-            setVisible(false);
-            setTimeout(() => onCloseRef.current(), 500); // Wait for fade out animation to complete
-        }, 4800);
-
-        return () => {
-            clearTimeout(timer);
-        };
-    }, []);
-
-    const handleClose = () => {
-        setVisible(false);
-        setTimeout(() => onCloseRef.current(), 1000); // Wait for fade out animation to complete
-    };
-
-    return (
-        <div
-            className={`max-w-sm rounded-xl shadow-2xl transition-all duration-500 ease-in-out transform ${
-                visible ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'
-            } overflow-hidden font-['Montserrat'] border border-secondary/50 backdrop-blur-sm`}
-        >
-            <div className={`p-4 ${bgColorMap[type]} flex items-center relative`}>
-                <div className="absolute top-0 left-0 w-full h-1 bg-white/30 rounded-t-xl"></div>
-                <div
-                    className="mr-4 flex-shrink-0 rounded-full bg-white/20 p-2.5 text-text-primary flex items-center justify-center shadow-md">
-                    <FontAwesomeIcon
-                        icon={iconMap[type]}
-                        size="lg"
-                        className="animate-pulse"
-                        style={{
-                            animation: 'pulse 2s infinite'
-                        }}
-                    />
-                </div>
-                <div className="flex-grow mr-3">
-                    <div className="text-text-primary font-medium text-base">
-                        {typeof message === 'string' ? message : String(message ?? 'Une erreur est survenue')}
-                    </div>
-                </div>
-                <button
-                    onClick={handleClose}
-                    className="text-text-primary/90 hover:text-text-primary p-1.5 rounded-lg hover:bg-white/20 transition-all duration-300"
-                    style={{
-                        transition: 'all 0.3s ease',
-                    }}
-                    onMouseEnter={(e) => {
-                        e.currentTarget.style.transform = 'rotate(90deg)';
-                    }}
-                    onMouseLeave={(e) => {
-                        e.currentTarget.style.transform = 'rotate(0deg)';
-                    }}
-                >
-                    <FontAwesomeIcon icon={faTimes}/>
-                </button>
-            </div>
-            <div className="h-1.5 w-full bg-secondary/50 relative">
-                <div
-                    className={`h-full ${
-                        type === 'success' ? 'bg-success' :
-                            type === 'error' ? 'bg-error' :
-                                type === 'warning' ? 'bg-warning' :
-                                    'bg-info'
-                    } shadow-sm`}
-                    style={{
-                        animation: 'shrink 5s linear forwards',
-                        width: '100%'
-                    }}
-                ></div>
-            </div>
-            <style>{`
-                @keyframes pulse {
-                    0% {
-                        opacity: 0.7;
-                    }
-                    50% {
-                        opacity: 1;
-                    }
-                    100% {
-                        opacity: 0.7;
-                    }
-                }
-
-                @keyframes shrink {
-                    0% {
-                        width: 100%;
-                    }
-                    100% {
-                        width: 0%;
-                    }
-                }
-            `}</style>
-        </div>
-    );
-}
diff --git a/components/SyncBook.tsx b/components/SyncBook.tsx
index 9fdcc29..b75f798 100644
--- a/components/SyncBook.tsx
+++ b/components/SyncBook.tsx
@@ -1,10 +1,10 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faCloud, faCloudArrowDown, faCloudArrowUp, faSpinner} from "@fortawesome/free-solid-svg-icons";
-import {useTranslations} from "next-intl";
+import {Cloud, CloudDownload, CloudUpload, Loader2} from "lucide-react";
+import {useTranslations} from "@/lib/i18n";
 import {useState, useEffect, useContext} from "react";
 import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
 import {SyncType} from "@/context/BooksSyncContext";
 import useSyncBooks from "@/hooks/useSyncBooks";
+import IconButton from "@/components/ui/IconButton";
 
 interface SyncBookProps {
     bookId: string;
@@ -27,7 +27,7 @@ export default function SyncBook({bookId, status}: SyncBookProps) {
     async function upload(): Promise<void> {
         if (isOffline) return;
         setIsLoading(true);
-        const success:boolean = await hookUpload(bookId);
+        const success: boolean = await hookUpload(bookId);
         if (success) setCurrentStatus('synced');
         setIsLoading(false);
     }
@@ -59,9 +59,7 @@ export default function SyncBook({bookId, status}: SyncBookProps) {
     if (isLoading) {
         return (
             <div className="flex items-center gap-2">
-                <span className="text-primary">
-                    <FontAwesomeIcon icon={faSpinner} className="w-4 h-4 animate-spin"/>
-                </span>
+                <Loader2 className="w-4 h-4 text-primary animate-spin"/>
             </div>
         );
     }
@@ -69,57 +67,48 @@ export default function SyncBook({bookId, status}: SyncBookProps) {
     return (
         <div className="flex items-center gap-2">
             {currentStatus === 'synced' && (
-                <span
-                    className="text-gray-light"
-                    title={t("bookCard.synced")}
-                >
-                    <FontAwesomeIcon icon={faCloud} className="w-4 h-4"/>
-                </span>
+                <Cloud className="w-4 h-4 text-gray-light" title={t("bookCard.synced")}/>
             )}
-            
+
             {currentStatus === 'local-only' && (
-                <button
+                <IconButton
+                    icon={CloudUpload}
+                    variant={isOffline ? 'muted' : 'primary'}
+                    size="sm"
                     onClick={upload}
-                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-gray hover:text-primary cursor-pointer'}`}
-                    title={t("bookCard.localOnly")}
-                    type="button"
                     disabled={isOffline}
-                >
-                    <FontAwesomeIcon icon={faCloudArrowUp} className="w-4 h-4"/>
-                </button>
+                    tooltip={t("bookCard.localOnly")}
+                />
             )}
             {currentStatus === 'server-only' && (
-                <button
+                <IconButton
+                    icon={CloudDownload}
+                    variant={isOffline ? 'muted' : 'primary'}
+                    size="sm"
                     onClick={download}
-                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-gray hover:text-primary cursor-pointer'}`}
-                    title={t("bookCard.serverOnly")}
-                    type="button"
                     disabled={isOffline}
-                >
-                    <FontAwesomeIcon icon={faCloudArrowDown} className="w-4 h-4"/>
-                </button>
+                    tooltip={t("bookCard.serverOnly")}
+                />
             )}
             {currentStatus === 'to-sync-from-server' && (
-                <button
+                <IconButton
+                    icon={CloudDownload}
+                    variant={isOffline ? 'muted' : 'primary'}
+                    size="sm"
                     onClick={syncFromServer}
-                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-warning hover:text-primary cursor-pointer'}`}
-                    title={t("bookCard.toSyncFromServer")}
-                    type="button"
                     disabled={isOffline}
-                >
-                    <FontAwesomeIcon icon={faCloudArrowDown} className="w-4 h-4"/>
-                </button>
+                    tooltip={t("bookCard.toSyncFromServer")}
+                />
             )}
             {currentStatus === 'to-sync-to-server' && (
-                <button
+                <IconButton
+                    icon={CloudUpload}
+                    variant={isOffline ? 'muted' : 'primary'}
+                    size="sm"
                     onClick={syncToServer}
-                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-warning hover:text-primary cursor-pointer'}`}
-                    title={t("bookCard.toSyncToServer")}
-                    type="button"
                     disabled={isOffline}
-                >
-                    <FontAwesomeIcon icon={faCloudArrowUp} className="w-4 h-4"/>
-                </button>
+                    tooltip={t("bookCard.toSyncToServer")}
+                />
             )}
         </div>
     );
diff --git a/components/SyncSeries.tsx b/components/SyncSeries.tsx
index 114121b..89ce2f2 100644
--- a/components/SyncSeries.tsx
+++ b/components/SyncSeries.tsx
@@ -1,131 +1,115 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCloud, faCloudArrowDown, faCloudArrowUp, faSpinner } from "@fortawesome/free-solid-svg-icons";
-import { useTranslations } from "next-intl";
-import { useState, useContext, useEffect } from "react";
-import OfflineContext, { OfflineContextType } from "@/context/OfflineContext";
-import { SeriesSyncType } from "@/context/SeriesSyncContext";
-import useSyncSeries from "@/hooks/useSyncSeries";
-
-interface SyncSeriesProps {
-    seriesId: string;
-    status: SeriesSyncType;
-}
-
-export default function SyncSeries({ seriesId, status }: SyncSeriesProps) {
-    const t = useTranslations();
-    const { isCurrentlyOffline } = useContext<OfflineContextType>(OfflineContext);
-    const [isLoading, setIsLoading] = useState<boolean>(false);
-    const [currentStatus, setCurrentStatus] = useState<SeriesSyncType>(status);
-    const { upload: hookUpload, download: hookDownload, syncFromServer: hookSyncFromServer, syncToServer: hookSyncToServer } = useSyncSeries();
-
-    // Synchroniser le state local avec le prop quand il change (ex: après sync auto)
-    useEffect(() => {
-        setCurrentStatus(status);
-    }, [status]);
-
-    const isOffline: boolean = isCurrentlyOffline();
-
-    async function upload(event: React.MouseEvent): Promise<void> {
-        event.stopPropagation();
-        if (isOffline) return;
-        setIsLoading(true);
-        const success: boolean = await hookUpload(seriesId);
-        if (success) setCurrentStatus('synced');
-        setIsLoading(false);
-    }
-
-    async function download(event: React.MouseEvent): Promise<void> {
-        event.stopPropagation();
-        if (isOffline) return;
-        setIsLoading(true);
-        const success = await hookDownload(seriesId);
-        if (success) setCurrentStatus('synced');
-        setIsLoading(false);
-    }
-
-    async function syncFromServer(event: React.MouseEvent): Promise<void> {
-        event.stopPropagation();
-        if (isOffline) return;
-        setIsLoading(true);
-        const success = await hookSyncFromServer(seriesId);
-        if (success) setCurrentStatus('synced');
-        setIsLoading(false);
-    }
-
-    async function syncToServer(event: React.MouseEvent): Promise<void> {
-        event.stopPropagation();
-        if (isOffline || isLoading) return;
-        setIsLoading(true);
-        const success = await hookSyncToServer(seriesId);
-        if (success) setCurrentStatus('synced');
-        setIsLoading(false);
-    }
-
-    if (isLoading) {
-        return (
-            <div className="flex items-center gap-2">
-                <span className="text-primary">
-                    <FontAwesomeIcon icon={faSpinner} className="w-4 h-4 animate-spin"/>
-                </span>
-            </div>
-        );
-    }
-
-    return (
-        <div className="flex items-center gap-2">
-            {currentStatus === 'synced' && (
-                <span
-                    className="text-gray-light"
-                    title={t("seriesCard.synced")}
-                >
-                    <FontAwesomeIcon icon={faCloud} className="w-4 h-4"/>
-                </span>
-            )}
-
-            {currentStatus === 'local-only' && (
-                <button
-                    onClick={upload}
-                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-gray hover:text-primary cursor-pointer'}`}
-                    title={t("seriesCard.localOnly")}
-                    type="button"
-                    disabled={isOffline}
-                >
-                    <FontAwesomeIcon icon={faCloudArrowUp} className="w-4 h-4"/>
-                </button>
-            )}
-            {currentStatus === 'server-only' && (
-                <button
-                    onClick={download}
-                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-gray hover:text-primary cursor-pointer'}`}
-                    title={t("seriesCard.serverOnly")}
-                    type="button"
-                    disabled={isOffline}
-                >
-                    <FontAwesomeIcon icon={faCloudArrowDown} className="w-4 h-4"/>
-                </button>
-            )}
-            {currentStatus === 'to-sync-from-server' && (
-                <button
-                    onClick={syncFromServer}
-                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-warning hover:text-primary cursor-pointer'}`}
-                    title={t("seriesCard.toSyncFromServer")}
-                    type="button"
-                    disabled={isOffline}
-                >
-                    <FontAwesomeIcon icon={faCloudArrowDown} className="w-4 h-4"/>
-                </button>
-            )}
-            {currentStatus === 'to-sync-to-server' && (
-                <button
-                    onClick={syncToServer}
-                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-warning hover:text-primary cursor-pointer'}`}
-                    title={t("seriesCard.toSyncToServer")}
-                    type="button"
-                    disabled={isOffline}
-                >
-                    <FontAwesomeIcon icon={faCloudArrowUp} className="w-4 h-4"/>
-                </button>
-            )}
-        </div>
-    );
-}
+import {Cloud, CloudDownload, CloudUpload, Loader2} from "lucide-react";
+import {useTranslations} from "@/lib/i18n";
+import {useState, useContext, useEffect} from "react";
+import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
+import {SeriesSyncType} from "@/context/SeriesSyncContext";
+import useSyncSeries from "@/hooks/useSyncSeries";
+import IconButton from "@/components/ui/IconButton";
+
+interface SyncSeriesProps {
+    seriesId: string;
+    status: SeriesSyncType;
+}
+
+export default function SyncSeries({seriesId, status}: SyncSeriesProps) {
+    const t = useTranslations();
+    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [currentStatus, setCurrentStatus] = useState<SeriesSyncType>(status);
+    const {upload: hookUpload, download: hookDownload, syncFromServer: hookSyncFromServer, syncToServer: hookSyncToServer} = useSyncSeries();
+
+    useEffect(() => {
+        setCurrentStatus(status);
+    }, [status]);
+
+    const isOffline: boolean = isCurrentlyOffline();
+
+    async function upload(): Promise<void> {
+        if (isOffline) return;
+        setIsLoading(true);
+        const success: boolean = await hookUpload(seriesId);
+        if (success) setCurrentStatus('synced');
+        setIsLoading(false);
+    }
+
+    async function download(): Promise<void> {
+        if (isOffline) return;
+        setIsLoading(true);
+        const success = await hookDownload(seriesId);
+        if (success) setCurrentStatus('synced');
+        setIsLoading(false);
+    }
+
+    async function syncFromServer(): Promise<void> {
+        if (isOffline) return;
+        setIsLoading(true);
+        const success = await hookSyncFromServer(seriesId);
+        if (success) setCurrentStatus('synced');
+        setIsLoading(false);
+    }
+
+    async function syncToServer(): Promise<void> {
+        if (isOffline || isLoading) return;
+        setIsLoading(true);
+        const success = await hookSyncToServer(seriesId);
+        if (success) setCurrentStatus('synced');
+        setIsLoading(false);
+    }
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+                <Loader2 className="w-4 h-4 text-primary animate-spin"/>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+            {currentStatus === 'synced' && (
+                <Cloud className="w-4 h-4 text-gray-light" title={t("seriesCard.synced")}/>
+            )}
+
+            {currentStatus === 'local-only' && (
+                <IconButton
+                    icon={CloudUpload}
+                    variant={isOffline ? 'muted' : 'primary'}
+                    size="sm"
+                    onClick={upload}
+                    disabled={isOffline}
+                    tooltip={t("seriesCard.localOnly")}
+                />
+            )}
+            {currentStatus === 'server-only' && (
+                <IconButton
+                    icon={CloudDownload}
+                    variant={isOffline ? 'muted' : 'primary'}
+                    size="sm"
+                    onClick={download}
+                    disabled={isOffline}
+                    tooltip={t("seriesCard.serverOnly")}
+                />
+            )}
+            {currentStatus === 'to-sync-from-server' && (
+                <IconButton
+                    icon={CloudDownload}
+                    variant={isOffline ? 'muted' : 'primary'}
+                    size="sm"
+                    onClick={syncFromServer}
+                    disabled={isOffline}
+                    tooltip={t("seriesCard.toSyncFromServer")}
+                />
+            )}
+            {currentStatus === 'to-sync-to-server' && (
+                <IconButton
+                    icon={CloudUpload}
+                    variant={isOffline ? 'muted' : 'primary'}
+                    size="sm"
+                    onClick={syncToServer}
+                    disabled={isOffline}
+                    tooltip={t("seriesCard.toSyncToServer")}
+                />
+            )}
+        </div>
+    );
+}
diff --git a/components/TermsOfUse.tsx b/components/TermsOfUse.tsx
index 948ca61..01a8725 100644
--- a/components/TermsOfUse.tsx
+++ b/components/TermsOfUse.tsx
@@ -1,25 +1,28 @@
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faExternalLinkAlt, faFileContract} from '@fortawesome/free-solid-svg-icons';
-// Removed Next.js router and Link imports for Electron
+import React from 'react';
+import {ExternalLink, FileText} from 'lucide-react';
+import Button from '@/components/ui/Button';
+import {AppRouterInstance, Link, useRouter} from '@/lib/navigation';
 
 interface TermsOfUseProps {
     onAccept: () => void;
 }
 
 export default function TermsOfUse({onAccept}: TermsOfUseProps) {
+    const router: AppRouterInstance = useRouter();
+    
     function handleAcceptTerm(): void {
         onAccept();
     }
     
     return (
         <div
-            className="fixed inset-0 z-50 bg-black/90 backdrop-blur-sm flex items-center justify-center p-6 font-['Lora']">
+            className="fixed inset-0 z-50 bg-darkest-background/90 backdrop-blur-sm flex items-center justify-center p-6 font-['Lora']">
             <div
-                className="bg-tertiary border border-primary/40 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
-                <div className="px-8 py-6 border-b border-secondary/40 bg-gradient-to-r from-primary/10 to-primary/5">
+                className="bg-tertiary border border-primary/40 rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
+                <div className="px-8 py-6 border-b border-secondary bg-gradient-to-r from-primary/10 to-primary/5">
                     <div className="flex items-center space-x-4">
                         <div className="bg-primary/20 p-3 rounded-xl">
-                            <FontAwesomeIcon icon={faFileContract} className="text-primary text-2xl"/>
+                            <FileText className="text-primary w-6 h-6" strokeWidth={1.75}/>
                         </div>
                         <div>
                             <h2 className="text-text-primary font-bold text-2xl">Termes d'utilisation</h2>
@@ -52,7 +55,7 @@ export default function TermsOfUse({onAccept}: TermsOfUseProps) {
                             </div>
                         </div>
                         
-                        <div className="bg-secondary/20 border border-secondary/30 rounded-xl p-6">
+                        <div className="bg-tertiary border border-secondary rounded-xl p-6">
                             <h3 className="text-text-primary font-semibold text-lg mb-4">
                                 Documentation complète
                             </h3>
@@ -67,14 +70,14 @@ export default function TermsOfUse({onAccept}: TermsOfUseProps) {
                                 className="inline-flex items-center space-x-2 text-primary hover:text-primary-light transition-colors duration-200 font-medium"
                             >
                                 <span>Consulter les termes complets</span>
-                                <FontAwesomeIcon icon={faExternalLinkAlt} className="text-sm"/>
+                                <ExternalLink className="w-4 h-4" strokeWidth={1.75}/>
                             </a>
                         </div>
                         
                         <div className="bg-warning/10 border border-warning/30 rounded-xl p-6">
                             <div className="flex items-start space-x-3">
                                 <div className="bg-warning/20 p-2 rounded-lg mt-1">
-                                    <FontAwesomeIcon icon={faFileContract} className="text-warning text-lg"/>
+                                    <FileText className="text-warning w-5 h-5" strokeWidth={1.75}/>
                                 </div>
                                 <div>
                                     <h4 className="text-text-primary font-semibold text-base mb-2">
@@ -90,28 +93,23 @@ export default function TermsOfUse({onAccept}: TermsOfUseProps) {
                         </div>
                     </div>
                 </div>
-                <div className="px-8 py-6 bg-secondary/10 border-t border-secondary/30 rounded-b-2xl">
+                <div className="px-8 py-6 bg-secondary border-t border-secondary rounded-b-2xl">
                     <div className="flex items-center justify-between">
                         <div className="flex items-center space-x-2 text-text-secondary text-sm">
-                            <FontAwesomeIcon icon={faFileContract} className="text-primary"/>
+                            <FileText className="text-primary w-4 h-4" strokeWidth={1.75}/>
                             <span>Décision requise pour continuer</span>
                         </div>
                         <div className="flex items-center space-x-4">
-                            <a
+                            <Link
                                 href="https://eritors.com"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-muted hover:text-text-primary px-6 py-3 rounded-xl hover:bg-secondary/30 transition-all duration-200 text-sm font-medium hover:scale-105"
-                            >
-                                Refuser et quitter
-                            </a>
-                            <button
-                                onClick={handleAcceptTerm}
-                                className="bg-primary hover:bg-primary-dark text-text-primary px-8 py-3 rounded-xl transition-all duration-200 text-sm font-bold shadow-lg hover:shadow-xl transform hover:scale-105"
+                                className="text-muted hover:text-text-primary px-6 py-3 rounded-xl hover:bg-secondary transition-colors duration-150 text-sm font-medium"
                                 type="button"
                             >
+                                Refuser et quitter
+                            </Link>
+                            <Button variant="primary" size="lg" onClick={handleAcceptTerm}>
                                 J'accepte les termes
-                            </button>
+                            </Button>
                         </div>
                     </div>
                 </div>
diff --git a/components/TwoFactorSetup.tsx b/components/TwoFactorSetup.tsx
index 7412656..9ec2a9b 100644
--- a/components/TwoFactorSetup.tsx
+++ b/components/TwoFactorSetup.tsx
@@ -1,196 +1,198 @@
-'use client';
-
-import {ChangeEvent, Dispatch, SetStateAction, useContext, useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faApple, faGooglePlay} from '@fortawesome/free-brands-svg-icons';
-import {faCheck, faKey, faMobileAlt, faQrcode} from '@fortawesome/free-solid-svg-icons';
-import System from "@/lib/models/System";
-import {AlertContext, AlertContextProps} from "@/context/AlertContext";
-import {FormResponse} from "@/shared/interface";
-import {SessionContext} from "@/context/SessionContext";
-import TextInput from "@/components/form/TextInput";
-
-export default function TwoFactorSetup({setShowSetup}: { setShowSetup: Dispatch<SetStateAction<boolean>> }) {
-    const {session} = useContext(SessionContext);
-    const alert: AlertContextProps = useContext(AlertContext);
-
-    const [step, setStep] = useState<number>(1);
-    const [token, setToken] = useState<string>('')
-    const [qrCode, setQrCode] = useState<string | null>(null);
-    const [loadingQRCode, setLoadingQRCode] = useState(false);
-
-    async function getQRCode() {
-        try {
-            const response: { qrCode: string } = await System.authPostToServer('twofactor/setup', {
-                email: session?.user?.email,
-            }, session?.accessToken ?? '');
-            setQrCode(response.qrCode);
-        } catch (e: any) {
-            alert.errorMessage(e.message);
-            console.error(e);
-        }
-    }
-
-    async function handleNextStep() {
-        if (step === 3) {
-            await validateToken();
-        } else if (step === 1) {
-            if (qrCode === null) {
-                getQRCode();
-            }
-            setStep((prev: number) => Math.min(prev + 1, 3));
-        } else {
-            setStep((prev: number) => Math.min(prev + 1, 3));
-        }
-    }
-
-    async function validateToken() {
-        try {
-            const response: FormResponse = await System.authPostToServer('twofactor/activate', {
-                email: session?.user?.email, token: token
-            }, session?.accessToken ?? '');
-            if (response.valid) {
-                alert.successMessage(response.message ?? '');
-                setShowSetup(false);
-            }
-        } catch (e: any) {
-            alert.errorMessage(e.message);
-            console.error(e);
-        }
-    }
-
-    function handlePrevStep() {
-        setStep((prev) => Math.max(prev - 1, 1));
-    }
-
-    function getProgressClass(currentStep: number) {
-        return `flex-grow h-2.5 rounded-full transition-all duration-300 ${
-            step >= currentStep ? 'bg-primary shadow-sm' : 'bg-secondary/50'
-        }`;
-    }
-
-    return (
-        <div
-            className="rounded-2xl shadow-2xl bg-tertiary/90 backdrop-blur-sm m-auto p-8 w-full border border-secondary/50">
-            <h2 className="text-2xl font-['ADLaM_Display'] text-text-primary text-center mb-6">
-                Setup Two-Factor Authentication
-            </h2>
-
-            {/* Step Indicator */}
-            <div className="mb-8">
-                <div className="flex items-center">
-                    <div className={getProgressClass(1)}></div>
-                    <div className="w-4"></div>
-                    <div className={getProgressClass(2)}></div>
-                    <div className="w-4"></div>
-                    <div className={getProgressClass(3)}></div>
-                </div>
-            </div>
-
-            {/* Step Content */}
-            <div className="mb-6">
-                {step === 1 && (
-                    <div className="text-muted">
-                        <p className="mb-4 text-text-primary">
-                            Follow these steps to enable two-factor authentication for your account:
-                        </p>
-                        <ol className="list-decimal list-inside space-y-3">
-                            <li className="flex items-start">
-                                <FontAwesomeIcon icon={faMobileAlt} className="text-primary mr-3 mt-1"/>
-                                Download a two-factor authentication app like Google Authenticator or Authy.
-                            </li>
-                            <li className="flex items-start">
-                                <FontAwesomeIcon icon={faCheck} className="text-primary mr-3 mt-1"/>
-                                Open the app and select the option to scan a QR code.
-                            </li>
-                            <li className="flex items-start">
-                                <FontAwesomeIcon icon={faQrcode} className="text-primary mr-3 mt-1"/>
-                                Proceed to the next step to scan the QR code provided.
-                            </li>
-                        </ol>
-                        <div className="mt-6 space-y-4">
-                            <a
-                                href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="flex items-center justify-center px-4 py-3 bg-primary text-text-primary rounded-xl hover:bg-primary-dark transition-all duration-200 hover:scale-105 shadow-md hover:shadow-lg font-medium"
-                            >
-                                <FontAwesomeIcon icon={faGooglePlay} className="mr-2"/>
-                                Download on Google Play
-                            </a>
-                            <a
-                                href="https://apps.apple.com/app/google-authenticator/id388497605"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="flex items-center justify-center px-4 py-3 bg-primary text-text-primary rounded-xl hover:bg-primary-dark transition-all duration-200 hover:scale-105 shadow-md hover:shadow-lg font-medium"
-                            >
-                                <FontAwesomeIcon icon={faApple} className="mr-2"/>
-                                Download on App Store
-                            </a>
-                        </div>
-                    </div>
-                )}
-                {step === 2 && (
-                    <div className="text-muted text-center">
-                        <p className="mb-4 text-text-primary">
-                            Scan the QR code below with your authentication app to link your account.
-                        </p>
-                        <div className="flex justify-center">
-                            <div className="bg-secondary/20 p-6 rounded-xl shadow-lg border border-secondary/50">
-                                {loadingQRCode ? (
-                                    <div className="text-muted">Loading QR Code...</div>
-                                ) : qrCode ? (
-                                    <img src={qrCode} alt="QR Code" className="w-48 h-48 mx-auto"/>
-                                ) : (
-                                    <div className="text-muted">Failed to load QR Code.</div>
-                                )}
-                            </div>
-                        </div>
-                        <p className="mt-4 text-sm text-muted">
-                            Having trouble? Make sure your app supports QR code scanning.
-                        </p>
-                    </div>
-                )}
-                {step === 3 && (
-                    <div className="text-text-secondary">
-                        <p className="mb-4">
-                            Enter the 6-digit code generated by your authentication app to verify the setup.
-                        </p>
-                        <div className="relative">
-                            <TextInput
-                                value={token}
-                                setValue={(e: ChangeEvent<HTMLInputElement>) => setToken(e.target.value)}
-                                placeholder="Enter 6-digit code"
-                            />
-                            <FontAwesomeIcon
-                                icon={faKey}
-                                className="absolute right-3 top-3 text-muted pointer-events-none"
-                            />
-                        </div>
-                    </div>
-                )}
-            </div>
-
-            {/* Navigation Buttons */}
-            <div className="flex justify-between">
-                <button
-                    onClick={handlePrevStep}
-                    disabled={step === 1}
-                    className={`px-6 py-2.5 rounded-xl transition-all duration-200 font-medium ${
-                        step === 1 ? 'bg-secondary/30 text-muted cursor-not-allowed' : 'bg-secondary/50 hover:bg-secondary text-text-primary hover:scale-105 shadow-sm border border-secondary/50'
-                    }`}
-                >
-                    Back
-                </button>
-                <button
-                    onClick={handleNextStep}
-                    className={`px-6 py-2.5 rounded-xl transition-all duration-200 font-medium ${
-                        step === 3 ? 'bg-success hover:bg-success/90 text-text-primary shadow-md hover:shadow-lg hover:scale-105' : 'bg-primary hover:bg-primary-dark text-text-primary shadow-md hover:shadow-lg hover:scale-105'
-                    }`}
-                >
-                    {step === 3 ? 'Finish' : 'Next'}
-                </button>
-            </div>
-        </div>
-    );
-}
+'use client';
+
+import {ChangeEvent, Dispatch, SetStateAction, useContext, useState} from 'react';
+import {Check, KeyRound, Smartphone, QrCode} from 'lucide-react';
+import {apiPost} from "@/lib/api/client";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {FormResponse} from "@/shared/interface";
+import {SessionContext} from "@/context/SessionContext";
+import TextInput from "@/components/form/TextInput";
+import InputField from "@/components/form/InputField";
+import Button from "@/components/ui/Button";
+
+const AppleIcon = () => (
+    <svg className="w-5 h-5" viewBox="0 0 384 512" fill="currentColor">
+        <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
+    </svg>
+);
+
+const GooglePlayIcon = () => (
+    <svg className="w-5 h-5" viewBox="0 0 512 512" fill="currentColor">
+        <path d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z"/>
+    </svg>
+);
+
+export default function TwoFactorSetup({setShowSetup}: { setShowSetup: Dispatch<SetStateAction<boolean>> }) {
+    const {session} = useContext(SessionContext);
+    const alert: AlertContextProps = useContext(AlertContext);
+
+    const [step, setStep] = useState<number>(1);
+    const [token, setToken] = useState<string>('')
+    const [qrCode, setQrCode] = useState<string | null>(null);
+    const [loadingQRCode, setLoadingQRCode] = useState(false);
+
+    async function getQRCode() {
+        try {
+            const response: { qrCode: string } = await apiPost('twofactor/setup', {
+                email: session?.user?.email,
+            }, session?.accessToken ?? '');
+            setQrCode(response.qrCode);
+        } catch (e: unknown) {
+            if (e instanceof Error) alert.errorMessage(e.message);
+        }
+    }
+
+    async function handleNextStep() {
+        if (step === 3) {
+            await validateToken();
+        } else if (step === 1) {
+            if (qrCode === null) {
+                getQRCode();
+            }
+            setStep((prev: number) => Math.min(prev + 1, 3));
+        } else {
+            setStep((prev: number) => Math.min(prev + 1, 3));
+        }
+    }
+
+    async function validateToken() {
+        try {
+            const response: FormResponse = await apiPost('twofactor/activate', {
+                email: session?.user?.email, token: token
+            }, session?.accessToken ?? '');
+            if (response.valid) {
+                alert.successMessage(response.message ?? '');
+                setShowSetup(false);
+            }
+        } catch (e: unknown) {
+            if (e instanceof Error) alert.errorMessage(e.message);
+        }
+    }
+
+    function handlePrevStep() {
+        setStep((prev) => Math.max(prev - 1, 1));
+    }
+
+    function getProgressClass(currentStep: number) {
+        return `flex-grow h-2.5 rounded-full transition-all duration-300 ${
+            step >= currentStep ? 'bg-primary shadow-sm' : 'bg-secondary/50'
+        }`;
+    }
+
+    return (
+        <div className="rounded-2xl shadow-2xl bg-tertiary/90 backdrop-blur-sm m-auto p-8 w-full border border-secondary/50">
+            <h2 className="text-2xl font-['ADLaM_Display'] text-text-primary text-center mb-6">
+                Setup Two-Factor Authentication
+            </h2>
+
+            <div className="mb-8">
+                <div className="flex items-center">
+                    <div className={getProgressClass(1)}></div>
+                    <div className="w-4"></div>
+                    <div className={getProgressClass(2)}></div>
+                    <div className="w-4"></div>
+                    <div className={getProgressClass(3)}></div>
+                </div>
+            </div>
+
+            <div className="mb-6">
+                {step === 1 && (
+                    <div className="text-muted">
+                        <p className="mb-4 text-text-primary">
+                            Follow these steps to enable two-factor authentication for your account:
+                        </p>
+                        <ol className="list-decimal list-inside space-y-3">
+                            <li className="flex items-start">
+                                <Smartphone className="w-5 h-5 text-primary mr-3 mt-0.5 flex-shrink-0"/>
+                                Download a two-factor authentication app like Google Authenticator or Authy.
+                            </li>
+                            <li className="flex items-start">
+                                <Check className="w-5 h-5 text-primary mr-3 mt-0.5 flex-shrink-0"/>
+                                Open the app and select the option to scan a QR code.
+                            </li>
+                            <li className="flex items-start">
+                                <QrCode className="w-5 h-5 text-primary mr-3 mt-0.5 flex-shrink-0"/>
+                                Proceed to the next step to scan the QR code provided.
+                            </li>
+                        </ol>
+                        <div className="mt-6 space-y-4">
+                            <a
+                                href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center justify-center gap-2 px-4 py-3 bg-primary text-text-primary rounded-xl hover:bg-primary-dark transition-all duration-200 hover:scale-105 shadow-md hover:shadow-lg font-medium"
+                            >
+                                <GooglePlayIcon/>
+                                Download on Google Play
+                            </a>
+                            <a
+                                href="https://apps.apple.com/app/google-authenticator/id388497605"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center justify-center gap-2 px-4 py-3 bg-primary text-text-primary rounded-xl hover:bg-primary-dark transition-all duration-200 hover:scale-105 shadow-md hover:shadow-lg font-medium"
+                            >
+                                <AppleIcon/>
+                                Download on App Store
+                            </a>
+                        </div>
+                    </div>
+                )}
+                {step === 2 && (
+                    <div className="text-muted text-center">
+                        <p className="mb-4 text-text-primary">
+                            Scan the QR code below with your authentication app to link your account.
+                        </p>
+                        <div className="flex justify-center">
+                            <div className="bg-secondary/20 p-6 rounded-xl shadow-lg border border-secondary/50">
+                                {loadingQRCode ? (
+                                    <div className="text-muted">Loading QR Code...</div>
+                                ) : qrCode ? (
+                                    <img src={qrCode} alt="QR Code" className="w-48 h-48 mx-auto"/>
+                                ) : (
+                                    <div className="text-muted">Failed to load QR Code.</div>
+                                )}
+                            </div>
+                        </div>
+                        <p className="mt-4 text-sm text-muted">
+                            Having trouble? Make sure your app supports QR code scanning.
+                        </p>
+                    </div>
+                )}
+                {step === 3 && (
+                    <div className="text-text-secondary">
+                        <p className="mb-4">
+                            Enter the 6-digit code generated by your authentication app to verify the setup.
+                        </p>
+                        <InputField
+                            icon={KeyRound}
+                            fieldName="Verification Code"
+                            input={
+                                <TextInput
+                                    value={token}
+                                    setValue={(e: ChangeEvent<HTMLInputElement>) => setToken(e.target.value)}
+                                    placeholder="Enter 6-digit code"
+                                />
+                            }
+                        />
+                    </div>
+                )}
+            </div>
+
+            <div className="flex justify-between">
+                <Button
+                    variant="secondary"
+                    onClick={handlePrevStep}
+                    disabled={step === 1}
+                >
+                    Back
+                </Button>
+                <Button
+                    variant={step === 3 ? 'success' : 'primary'}
+                    onClick={handleNextStep}
+                >
+                    {step === 3 ? 'Finish' : 'Next'}
+                </Button>
+            </div>
+        </div>
+    );
+}
diff --git a/components/UserMenu.tsx b/components/UserMenu.tsx
deleted file mode 100644
index 8e39af4..0000000
--- a/components/UserMenu.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import {useContext, useEffect, useRef, useState} from "react";
-import {SessionContext} from "@/context/SessionContext";
-import NoPicture from "@/components/NoPicture";
-import System from "@/lib/models/System";
-import {useTranslations} from "next-intl";
-import * as tauri from '@/lib/tauri';
-
-export default function UserMenu() {
-    const {session} = useContext(SessionContext);
-    const t = useTranslations();
-    
-    const profileMenuRef: React.RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
-
-    const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
-
-    function handleProfileClick(): void {
-        setIsProfileMenuOpen(!isProfileMenuOpen);
-    }
-    
-    useEffect((): () => void => {
-        function handleClickOutside(event: MouseEvent): void {
-            if (profileMenuRef.current && !profileMenuRef.current.contains(event.target as Node)) {
-                setIsProfileMenuOpen(false);
-            }
-        }
-        
-        if (isProfileMenuOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        
-        return (): void => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isProfileMenuOpen]);
-    
-    async function handleLogout(): Promise<void> {
-        System.removeCookie("token");
-        await tauri.removeToken();
-        tauri.logout();
-    }
-
-    return (
-        <div className="relative" data-guide="user-dropdown" ref={profileMenuRef}>
-            <button
-                className="group bg-secondary/50 hover:bg-secondary p-2.5 rounded-full transition-all duration-200 flex items-center border border-secondary/50 hover:border-primary/30 hover:shadow-md hover:scale-110"
-                onClick={session.user ? handleProfileClick : () => document.location.href = "/login"}
-            >
-                {
-                    session.user && <NoPicture/>
-                }
-            </button>
-            {isProfileMenuOpen && (
-                <div
-                    className="absolute right-0 mt-3 w-56 bg-tertiary rounded-xl shadow-2xl py-2 z-[100] border border-secondary/50 backdrop-blur-sm animate-fadeIn">
-                    <div
-                        className="px-4 py-3 border-b border-secondary/30 bg-gradient-to-r from-primary/10 to-transparent">
-                        <p className="text-text-primary font-bold text-sm tracking-wide">{session.user?.username}</p>
-                        <p className="text-text-secondary text-xs mt-0.5">{session.user?.email}</p>
-                    </div>
-                    <a href="https://eritors.com/settings"
-                       className="group flex items-center gap-3 px-4 py-2.5 text-text-primary hover:bg-secondary/50 transition-all hover:pl-5">
-                        <span
-                            className="text-sm font-medium group-hover:text-primary transition-colors">{t('userMenu.settings')}</span>
-                    </a>
-                    <a onClick={handleLogout} href="#"
-                       className="group flex items-center gap-3 px-4 py-2.5 text-error hover:bg-error/10 transition-all hover:pl-5 rounded-b-xl">
-                        <span className="text-sm font-medium">{t('userMenu.logout')}</span>
-                    </a>
-                </div>
-            )}
-        </div>
-    )
-}
diff --git a/components/book/AddNewBookForm.tsx b/components/book/AddNewBookForm.tsx
index 53190d0..3680292 100644
--- a/components/book/AddNewBookForm.tsx
+++ b/components/book/AddNewBookForm.tsx
@@ -1,36 +1,26 @@
 'use client'
+import React, {ChangeEvent, Dispatch, SetStateAction, useContext, useState} from "react";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {apiPost} from "@/lib/api/client";
+import {isDesktop} from '@/lib/configs';
 import * as tauri from '@/lib/tauri';
-import {ChangeEvent, Dispatch, RefObject, SetStateAction, useContext, useEffect, useRef, useState} from "react";
-import {AlertContext} from "@/context/AlertContext";
-import System from "@/lib/models/System";
-import {SessionContext} from "@/context/SessionContext";
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {
-    faBook,
-    faBookOpen,
-    faCalendarAlt,
-    faFileWord,
-    faInfo,
-    faPencilAlt,
-    faX
-} from "@fortawesome/free-solid-svg-icons";
-import {SelectBoxProps} from "@/shared/interface";
-import {BookProps, bookTypes} from "@/lib/models/Book";
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {Book, BookOpen, Calendar, FileText, Info, Pencil} from "lucide-react";
+import SelectBox, {SelectBoxProps} from "@/components/form/SelectBox";
+import {bookTypes} from "@/lib/constants/book";
 import InputField from "@/components/form/InputField";
 import TextInput from "@/components/form/TextInput";
-import SelectBox from "@/components/form/SelectBox";
 import DatePicker from "@/components/form/DatePicker";
 import NumberInput from "@/components/form/NumberInput";
-import TexteAreaInput from "@/components/form/TexteAreaInput";
-import CancelButton from "@/components/form/CancelButton";
-import SubmitButtonWLoading from "@/components/form/SubmitButtonWLoading";
+import TextAreaInput from "@/components/form/TextAreaInput";
+import Button from "@/components/ui/Button";
+import Modal from "@/components/ui/Modal";
 import GuideTour, {GuideStep} from "@/components/GuideTour";
-import {UserProps} from "@/lib/models/User";
-import {useTranslations} from "next-intl";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
 import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
+import {SyncedBook} from "@/lib/types/synced-book";
 
 interface MinMax {
     min: number;
@@ -39,13 +29,11 @@ interface MinMax {
 
 export default function AddNewBookForm({setCloseForm}: { setCloseForm: Dispatch<SetStateAction<boolean>> }) {
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage} = useContext(AlertContext);
-    const {setServerOnlyBooks, setLocalOnlyBooks} = useContext<BooksSyncContextProps>(BooksSyncContext)
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const modalRef: RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
-    
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session, setSession}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {setServerSyncedBooks}: BooksSyncContextProps = useContext<BooksSyncContextProps>(BooksSyncContext)
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
     const [title, setTitle] = useState<string>('');
     const [subtitle, setSubtitle] = useState<string>('');
     const [summary, setSummary] = useState<string>('');
@@ -66,27 +54,27 @@ export default function AddNewBookForm({setCloseForm}: { setCloseForm: Dispatch<
         content: (
             <div className="space-y-4 max-h-96 overflow-y-auto custom-scrollbar">
                 <div className="space-y-3">
-                    <div className="border-l-4 border-primary pl-4 bg-secondary/10 p-3 rounded-r-xl">
+                    <div className="border-l-4 border-primary pl-4 bg-secondary p-3 rounded-r-xl">
                         <h4 className="font-semibold text-lg text-text-primary mb-1">{t("addNewBookForm.bookTypeHint.nouvelle.title")}</h4>
                         <p className="text-sm text-muted mb-2">{t("addNewBookForm.bookTypeHint.nouvelle.range")}</p>
                         <p className="text-sm text-text-secondary">{t("addNewBookForm.bookTypeHint.nouvelle.description")}</p>
                     </div>
-                    <div className="border-l-4 border-primary pl-4 bg-secondary/10 p-3 rounded-r-xl">
+                    <div className="border-l-4 border-primary pl-4 bg-secondary p-3 rounded-r-xl">
                         <h4 className="font-semibold text-lg text-text-primary mb-1">{t("addNewBookForm.bookTypeHint.novelette.title")}</h4>
                         <p className="text-sm text-muted mb-2">{t("addNewBookForm.bookTypeHint.novelette.range")}</p>
                         <p className="text-sm text-text-secondary">{t("addNewBookForm.bookTypeHint.novelette.description")}</p>
                     </div>
-                    <div className="border-l-4 border-primary pl-4 bg-secondary/10 p-3 rounded-r-xl">
+                    <div className="border-l-4 border-primary pl-4 bg-secondary p-3 rounded-r-xl">
                         <h4 className="font-semibold text-lg text-text-primary mb-1">{t("addNewBookForm.bookTypeHint.novella.title")}</h4>
                         <p className="text-sm text-muted mb-2">{t("addNewBookForm.bookTypeHint.novella.range")}</p>
                         <p className="text-sm text-text-secondary">{t("addNewBookForm.bookTypeHint.novella.description")}</p>
                     </div>
-                    <div className="border-l-4 border-primary pl-4 bg-secondary/10 p-3 rounded-r-xl">
+                    <div className="border-l-4 border-primary pl-4 bg-secondary p-3 rounded-r-xl">
                         <h4 className="font-semibold text-lg text-text-primary mb-1">{t("addNewBookForm.bookTypeHint.chapbook.title")}</h4>
                         <p className="text-sm text-muted mb-2">{t("addNewBookForm.bookTypeHint.chapbook.range")}</p>
                         <p className="text-sm text-text-secondary">{t("addNewBookForm.bookTypeHint.chapbook.description")}</p>
                     </div>
-                    <div className="border-l-4 border-primary pl-4 bg-secondary/10 p-3 rounded-r-xl">
+                    <div className="border-l-4 border-primary pl-4 bg-secondary p-3 rounded-r-xl">
                         <h4 className="font-semibold text-lg text-text-primary mb-1">{t("addNewBookForm.bookTypeHint.roman.title")}</h4>
                         <p className="text-sm text-muted mb-2">{t("addNewBookForm.bookTypeHint.roman.range")}</p>
                         <p className="text-sm text-text-secondary">{t("addNewBookForm.bookTypeHint.roman.description")}</p>
@@ -101,13 +89,6 @@ export default function AddNewBookForm({setCloseForm}: { setCloseForm: Dispatch<
         ),
     }]
     
-    useEffect((): () => void => {
-        document.body.style.overflow = 'hidden';
-        return (): void => {
-            document.body.style.overflow = 'auto';
-        };
-    }, []);
-    
     async function handleAddBook(): Promise<void> {
         if (!title) {
             errorMessage(t('addNewBookForm.error.titleMissing'));
@@ -128,85 +109,60 @@ export default function AddNewBookForm({setCloseForm}: { setCloseForm: Dispatch<
         }
         setIsAddingBook(true);
         try {
-            const bookData = {
-                title,
-                subTitle: subtitle,
-                type: selectedBookType,
-                summary,
-                serie: 0,
-                publicationDate,
-                desiredWordCount: wordCount
-            };
-
             let bookId: string;
-            if (isCurrentlyOffline()) {
-                bookId = await tauri.createBook(bookData);
+            if (isDesktop && isCurrentlyOffline()) {
+                bookId = await tauri.createBook({
+                    title: title,
+                    subTitle: subtitle,
+                    type: selectedBookType,
+                    summary: summary,
+                    desiredReleaseDate: publicationDate,
+                    desiredWordCount: wordCount,
+                });
             } else {
-                bookId = await System.authPostToServer<string>('book/add', bookData, token, lang);
+                bookId = await apiPost<string>('book/add', {
+                    title: title,
+                    subTitle: subtitle,
+                    type: selectedBookType,
+                    summary: summary,
+                    serie: 0,
+                    publicationDate: publicationDate,
+                    desiredWordCount: wordCount,
+                }, token, lang);
             }
-            
             if (!bookId) {
-                errorMessage(t('addNewBookForm.error.addingBook'))
+                errorMessage(t('addNewBookForm.error.addingBook'));
+                setIsAddingBook(false);
                 return;
             }
-
-            const book: BookProps = {
-                bookId: bookId,
-                ...bookData
+            const book: SyncedBook = {
+                id: bookId,
+                type: selectedBookType,
+                title: title,
+                subTitle: subtitle,
+                seriesId: null,
+                lastUpdate: new Date().getTime() / 1000,
+                chapters: [],
+                characters: [],
+                locations: [],
+                worlds: [],
+                incidents: [],
+                plotPoints: [],
+                issues: [],
+                actSummaries: [],
+                guideLine: null,
+                aiGuideLine: null
             };
-            if (isCurrentlyOffline()){
-                setLocalOnlyBooks((prevBooks: SyncedBook[]): SyncedBook[] => [...prevBooks, {
-                    id: book.bookId,
-                    type: selectedBookType,
-                    title: title,
-                    subTitle: subtitle,
-                    lastUpdate: new Date().getTime()/1000,
-                    chapters: [],
-                    characters: [],
-                    locations: [],
-                    worlds: [],
-                    incidents: [],
-                    plotPoints: [],
-                    issues: [],
-                    actSummaries: [],
-                    guideLine: null,
-                    aiGuideLine: null,
-                    bookTools: null,
-                    seriesId: null,
-                    spells: [],
-                    spellTags: []
-                }]);
-            }
-            else {
-                setServerOnlyBooks((prevBooks: SyncedBook[]): SyncedBook[] => [...prevBooks, {
-                    id: book.bookId,
-                    type: selectedBookType,
-                    title: title,
-                    subTitle: subtitle,
-                    lastUpdate: new Date().getTime()/1000,
-                    chapters: [],
-                    characters: [],
-                    locations: [],
-                    worlds: [],
-                    incidents: [],
-                    plotPoints: [],
-                    issues: [],
-                    actSummaries: [],
-                    guideLine: null,
-                    aiGuideLine: null,
-                    bookTools: null,
-                    seriesId: null,
-                    spells: [],
-                    spellTags: []
-                }]);
-            }
+            setServerSyncedBooks((prev: SyncedBook[]): SyncedBook[] => [...prev, book])
             
             setIsAddingBook(false);
             setCloseForm(false)
         } catch (e: unknown) {
-            console.error('[AddBook] Raw error:', e, typeof e, JSON.stringify(e));
-            const msg = e instanceof Error ? e.message : typeof e === 'object' && e !== null && 'message' in e ? String((e as {message:string}).message) : typeof e === 'string' ? e : t('addNewBookForm.error.addingBook');
-            errorMessage(msg);
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t('addNewBookForm.error.addingBook'));
+            }
             setIsAddingBook(false);
         }
     }
@@ -247,96 +203,83 @@ export default function AddNewBookForm({setCloseForm}: { setCloseForm: Dispatch<
     }
     
     return (
-        <div
-            className="fixed inset-0 flex items-center justify-center bg-black/60 z-40 backdrop-blur-md animate-fadeIn">
-            <div ref={modalRef}
-                 className="bg-tertiary/95 backdrop-blur-sm text-text-primary rounded-2xl border border-secondary/50 shadow-2xl md:w-3/4 xl:w-1/4 lg:w-2/4 sm:w-11/12 max-h-[85vh] flex flex-col">
-                <div className="flex justify-between items-center bg-primary px-6 py-4 rounded-t-2xl shadow-lg">
-                    <h2 className="flex items-center gap-3 font-['ADLaM_Display'] text-2xl text-text-primary">
-                        <FontAwesomeIcon icon={faBook} className="w-6 h-6"/>
-                        {t("addNewBookForm.title")}
-                    </h2>
-                    <button
-                        className="text-background hover:text-background w-10 h-10 rounded-xl hover:bg-white/20 transition-all duration-200 flex items-center justify-center hover:scale-110"
-                        onClick={(): void => setCloseForm(false)}
-                    >
-                        <FontAwesomeIcon icon={faX} className={'w-5 h-5'}/>
-                    </button>
-                </div>
+        <>
+            <Modal
+                icon={Book}
+                title={t("addNewBookForm.title")}
+                onClose={(): void => setCloseForm(false)}
+                size="sm"
+                footer={
+                    <>
+                        <Button variant="secondary" onClick={() => setCloseForm(false)}>{t("common.cancel")}</Button>
+                        <Button
+                            variant="primary"
+                            onClick={handleAddBook}
+                            isLoading={isAddingBook}
+                            loadingText={t("addNewBookForm.adding")}
+                            icon={Book}
+                        >{t("addNewBookForm.add")}</Button>
+                    </>
+                }
+            >
+                <InputField icon={BookOpen} fieldName={t("addNewBookForm.type")} input={
+                    <SelectBox
+                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setSelectedBookType(e.target.value)}
+                        data={bookTypes.map((types: SelectBoxProps): SelectBoxProps => {
+                            return {
+                                value: types.value,
+                                label: t(types.label)
+                            }
+                        })} defaultValue={selectedBookType}
+                        placeholder={t("addNewBookForm.typePlaceholder")}/>
+                } action={async (): Promise<void> => setBookTypeHint(true)} actionIcon={Info}/>
+                <InputField icon={Pencil} fieldName={t("addNewBookForm.bookTitle")} input={
+                    <TextInput value={title}
+                               setValue={(e: ChangeEvent<HTMLInputElement>): void => setTitle(e.target.value)}
+                               placeholder={t("addNewBookForm.bookTitlePlaceholder")}/>
+                }/>
+                {
+                    selectedBookType !== 'lyric' && (
+                        <InputField icon={Pencil} fieldName={t("addNewBookForm.subtitle")} input={
+                            <TextInput value={subtitle}
+                                       setValue={(e: ChangeEvent<HTMLInputElement>): void => setSubtitle(e.target.value)}
+                                       placeholder={t("addNewBookForm.subtitlePlaceholder")}/>
+                        }/>
+                    )
+                }
                 
-                <div className="p-5 overflow-y-auto flex-grow custom-scrollbar">
-                    <div className="space-y-6">
-                        <InputField icon={faBookOpen} fieldName={t("addNewBookForm.type")} input={
-                            <SelectBox
-                                onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setSelectedBookType(e.target.value)}
-                                data={bookTypes.map((types: SelectBoxProps): SelectBoxProps => {
-                                    return {
-                                        value: types.value,
-                                        label: t(types.label)
-                                    }
-                                })} defaultValue={selectedBookType}
-                                placeholder={t("addNewBookForm.typePlaceholder")}/>
-                        } action={async (): Promise<void> => setBookTypeHint(true)} actionIcon={faInfo}/>
-                        <InputField icon={faPencilAlt} fieldName={t("addNewBookForm.bookTitle")} input={
-                            <TextInput value={title}
-                                       setValue={(e: ChangeEvent<HTMLInputElement>): void => setTitle(e.target.value)}
-                                       placeholder={t("addNewBookForm.bookTitlePlaceholder")}/>
-                        }/>
-                        {
-                            selectedBookType !== 'lyric' && (
-                                <InputField icon={faPencilAlt} fieldName={t("addNewBookForm.subtitle")} input={
-                                    <TextInput value={subtitle}
-                                               setValue={(e: ChangeEvent<HTMLInputElement>): void => setSubtitle(e.target.value)}
-                                               placeholder={t("addNewBookForm.subtitlePlaceholder")}/>
-                                }/>
-                            )
-                        }
-                        
-                        <InputField icon={faCalendarAlt} fieldName={t("addNewBookForm.publicationDate")} input={
-                            <DatePicker date={publicationDate}
-                                        setDate={(e: React.ChangeEvent<HTMLInputElement>): void => setPublicationDate(e.target.value)}/>
-                        }/>
-                        
-                        {
-                            selectedBookType !== 'lyric' && (
-                                <>
-                                    <InputField icon={faFileWord} fieldName={t("addNewBookForm.wordGoal")}
-                                                hint={selectedBookType && `${maxWordsCountHint().min.toLocaleString('fr-FR')} - ${maxWordsCountHint().max > 0 ? maxWordsCountHint().max.toLocaleString('fr-FR') : '∞'} ${t("addNewBookForm.words")}`}
-                                                input={
-                                                    <NumberInput value={wordCount} setValue={setWordCount}
-                                                                 placeholder={t("addNewBookForm.wordGoalPlaceholder")}/>
-                                                }/>
-                                    
-                                    <InputField
-                                        icon={faFileWord}
-                                        fieldName={t("addNewBookForm.summary")}
+                <InputField icon={Calendar} fieldName={t("addNewBookForm.publicationDate")} input={
+                    <DatePicker date={publicationDate}
+                                setDate={(e: React.ChangeEvent<HTMLInputElement>): void => setPublicationDate(e.target.value)}/>
+                }/>
+
+                {
+                    selectedBookType !== 'lyric' && (
+                        <>
+                            <InputField icon={FileText} fieldName={t("addNewBookForm.wordGoal")}
+                                        hint={selectedBookType && `${maxWordsCountHint().min.toLocaleString('fr-FR')} - ${maxWordsCountHint().max > 0 ? maxWordsCountHint().max.toLocaleString('fr-FR') : '∞'} ${t("addNewBookForm.words")}`}
                                         input={
-                                            <TexteAreaInput
-                                                value={summary}
-                                                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setSummary(e.target.value)}
-                                                placeholder={t("addNewBookForm.summaryPlaceholder")}
-                                            />
-                                        }
+                                            <NumberInput value={wordCount} setValue={setWordCount}
+                                                         placeholder={t("addNewBookForm.wordGoalPlaceholder")}/>
+                                        }/>
+                            
+                            <InputField
+                                icon={FileText}
+                                fieldName={t("addNewBookForm.summary")}
+                                input={
+                                    <TextAreaInput
+                                        value={summary}
+                                        setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setSummary(e.target.value)}
+                                        placeholder={t("addNewBookForm.summaryPlaceholder")}
                                     />
-                                </>
-                            )
-                        }
-                    </div>
-                </div>
-                
-                <div
-                    className="flex justify-between items-center p-5 border-t border-secondary/50 bg-secondary/20 rounded-b-2xl">
-                    <div></div>
-                    <div className="flex gap-3">
-                        <CancelButton callBackFunction={() => setCloseForm(false)}/>
-                        <SubmitButtonWLoading callBackAction={handleAddBook} isLoading={isAddingBook}
-                                              text={t("addNewBookForm.add")}
-                                              loadingText={t("addNewBookForm.adding")} icon={faBook}/>
-                    </div>
-                </div>
-            </div>
+                                }
+                            />
+                        </>
+                    )
+                }
+            </Modal>
             {bookTypeHint && <GuideTour stepId={0} steps={bookTypesHint} onClose={(): void => setBookTypeHint(false)}
                                         onComplete={async (): Promise<void> => setBookTypeHint(false)}/>}
-        </div>
+        </>
     );
 }
\ No newline at end of file
diff --git a/components/book/BookCard.tsx b/components/book/BookCard.tsx
index 416062b..dbe2d19 100644
--- a/components/book/BookCard.tsx
+++ b/components/book/BookCard.tsx
@@ -1,75 +1,58 @@
-// Removed Next.js Link import for Electron
-import {BookProps} from "@/lib/models/Book";
+import {Link} from '@/lib/navigation';
+import React from "react";
+import {BookProps} from "@/lib/types/book";
 import DeleteBook from "@/components/book/settings/DeleteBook";
-import {useTranslations} from "next-intl";
-import SyncBook from "@/components/SyncBook";
-import {SyncType} from "@/context/BooksSyncContext";
+import {useTranslations} from '@/lib/i18n';
 
-interface BookCardProps {
-    book: BookProps;
-    onClickCallback: (bookId: string) => void;
-    index: number;
-    syncStatus: SyncType;
-}
-
-export default function BookCard({book, onClickCallback, index, syncStatus}: BookCardProps) {
+export default function BookCard(
+    {
+        book,
+        onClickCallback,
+        index
+    }: {
+        book: BookProps,
+        onClickCallback: Function;
+        index: number;
+    }) {
     const t = useTranslations();
+
     return (
-        <div
-            className="group bg-tertiary/90 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 h-full border border-secondary/50 hover:border-primary/50 flex flex-col">
-            <div className="relative w-full aspect-[2/3] flex-shrink-0 overflow-hidden rounded-t-2xl">
-                <button onClick={(): void => onClickCallback(book.bookId)} className="w-full h-full text-left block" type="button">
-                    {book.coverImage ? (
-                        <img
-                            src={book.coverImage}
-                            alt={book.title || t("bookCard.noCoverAlt")}
-                            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
-                        />
-                    ) : (
-                        <div
-                            className="relative w-full h-full bg-gradient-to-br from-secondary via-secondary to-gray-dark flex items-center justify-center overflow-hidden">
-                            <div className="absolute inset-0 bg-primary/5"></div>
-                            <span
-                                className="relative text-primary/80 text-4xl sm:text-5xl md:text-6xl font-['ADLaM_Display'] tracking-wider">
-                                {book.title.charAt(0).toUpperCase()}{t("bookCard.initialsSeparator")}{book.subTitle ? book.subTitle.charAt(0).toUpperCase() : ''}
-                            </span>
-                            <div
-                                className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/30 to-transparent"></div>
-                            <div
-                                className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/30 to-transparent"></div>
-                        </div>
+        <Link href={`/book/${book.bookId}`}>
+            <div
+                className="group relative aspect-[2/3] rounded-xl overflow-hidden cursor-pointer transition-all duration-300 hover:ring-1 hover:ring-text-primary/20">
+                {book.coverImage ? (
+                    <img
+                        src={book.coverImage}
+                        alt={book.title || t("bookCard.noCoverAlt")}
+                        className="w-full h-full object-cover"
+                    />
+                ) : (
+                    <div className="w-full h-full bg-secondary flex items-center justify-center">
+                        <span className="text-muted text-5xl font-['ADLaM_Display']">
+                            {book.title.charAt(0).toUpperCase()}
+                        </span>
+                    </div>
+                )}
+                
+                <div className="absolute inset-x-0 bottom-0 bg-darkest-background/70 p-3">
+                    <h3 className="text-text-primary font-bold text-sm truncate">
+                        {book.title}
+                    </h3>
+                    {book.subTitle && (
+                        <p className="text-text-secondary text-xs truncate mt-0.5">
+                            {book.subTitle}
+                        </p>
                     )}
-                </button>
+                </div>
+                
                 <div
-                    className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-tertiary via-tertiary/50 to-transparent h-24"></div>
-            </div>
-            
-            <div className="p-4 flex-1 flex flex-col justify-between">
-                <div className="flex-1">
-                    <button onClick={(): void => onClickCallback(book.bookId)} className="w-full text-left" type="button">
-                        <h3 className="text-text-primary text-center font-bold text-base mb-2 truncate group-hover:text-primary transition-colors tracking-wide">
-                            {book.title}
-                        </h3>
-                    </button>
-                    <div className="flex items-center justify-center mb-3 h-5">
-                        {book.subTitle ? (
-                            <>
-                                <div className="h-px w-8 bg-primary/30"></div>
-                                <p className="text-muted text-center mx-2 text-xs italic truncate px-2">
-                                    {book.subTitle}
-                                </p>
-                                <div className="h-px w-8 bg-primary/30"></div>
-                            </>
-                        ) : null}
-                    </div>
-                </div>
-                <div className="flex justify-between items-center pt-3 border-t border-secondary/30">
-                    <SyncBook status={syncStatus} bookId={book.bookId}/>
-                    <div className="flex items-center gap-1" {...index === 0 && {'data-guide': 'bottom-book-card'}}>
-                        <DeleteBook bookId={book.bookId}/>
-                    </div>
+                    className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                    onClick={(e: React.MouseEvent): void => e.preventDefault()}
+                    {...(index === 0 && {'data-guide': 'bottom-book-card'})}
+                >
+                    <DeleteBook bookId={book.bookId}/>
                 </div>
             </div>
-        </div>
+        </Link>
     )
-}
\ No newline at end of file
+}
diff --git a/components/book/BookCardSkeleton.tsx b/components/book/BookCardSkeleton.tsx
index 07d3c6a..dd16a79 100644
--- a/components/book/BookCardSkeleton.tsx
+++ b/components/book/BookCardSkeleton.tsx
@@ -1,26 +1,25 @@
-export default function BookCardSkeleton() {
-    return (
-        <div
-            className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg h-full border border-secondary/50 flex flex-col animate-pulse">
-            <div className="relative w-full h-[400px] sm:h-32 md:h-48 lg:h-64 xl:h-80 flex-shrink-0">
-                <div className="w-full h-full bg-secondary/30 rounded-t-xl"></div>
-                <div
-                    className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-background to-transparent h-20"></div>
-            </div>
-            
-            <div className="p-3 flex-1 flex flex-col justify-between">
-                <div>
-                    <div className="h-4 bg-secondary/30 rounded-lg mb-2 w-3/4 mx-auto"></div>
-                    <div className="h-3 bg-secondary/20 rounded-lg w-1/2 mx-auto"></div>
-                </div>
-                <div className="flex justify-between items-center mt-4">
-                    <div className="h-6 bg-secondary/30 rounded-full w-16"></div>
-                    <div className="flex items-center space-x-2">
-                        <div className="h-8 w-8 bg-secondary/30 rounded-lg"></div>
-                        <div className="h-8 w-8 bg-secondary/30 rounded-lg"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
+export default function BookCardSkeleton() {
+    return (
+        <div className="bg-tertiary rounded-xl h-full flex flex-col animate-pulse">
+            <div className="relative w-full h-[400px] sm:h-32 md:h-48 lg:h-64 xl:h-80 flex-shrink-0">
+                <div className="w-full h-full bg-secondary rounded-t-xl"></div>
+                <div
+                    className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-background to-transparent h-20"></div>
+            </div>
+
+            <div className="p-3 flex-1 flex flex-col justify-between">
+                <div>
+                    <div className="h-4 bg-secondary rounded-lg mb-2 w-3/4 mx-auto"></div>
+                    <div className="h-3 bg-tertiary rounded-lg w-1/2 mx-auto"></div>
+                </div>
+                <div className="flex justify-between items-center mt-4">
+                    <div className="h-6 bg-secondary rounded-full w-16"></div>
+                    <div className="flex items-center space-x-2">
+                        <div className="h-8 w-8 bg-secondary rounded-lg"></div>
+                        <div className="h-8 w-8 bg-secondary rounded-lg"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/components/book/BookList.tsx b/components/book/BookList.tsx
index 8d0ff0e..3818eba 100644
--- a/components/book/BookList.tsx
+++ b/components/book/BookList.tsx
@@ -1,25 +1,24 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {apiGet, apiPost} from "@/lib/api/client";
+import {isDesktop} from '@/lib/configs';
 import * as tauri from '@/lib/tauri';
-import {useContext, useEffect, useRef, useState} from "react";
-import System from "@/lib/models/System";
-import {AlertContext} from "@/context/AlertContext";
-import {BookContext} from "@/context/BookContext";
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
 import SearchBook from "./SearchBook";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faBook, faChevronLeft, faChevronRight, faDownload, faGear, faTrash} from "@fortawesome/free-solid-svg-icons";
-import {SessionContext} from "@/context/SessionContext";
-import Book, {BookProps} from "@/lib/models/Book";
+import {useRouter} from "@/lib/navigation";
+import {Book, ChevronLeft, ChevronRight, Download, Settings, Trash2} from 'lucide-react';
+import Badge from "@/components/ui/Badge";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {BookProps} from "@/lib/types/book";
+import {getBookTypeLabel} from "@/lib/utils/book";
 import BookCard from "@/components/book/BookCard";
 import BookCardSkeleton from "@/components/book/BookCardSkeleton";
 import GuideTour, {GuideStep} from "@/components/GuideTour";
-import User from "@/lib/models/User";
-import {useTranslations} from "next-intl";
+import {guideTourDone, setNewGuideTour} from "@/lib/utils/user";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {BooksSyncContext, BooksSyncContextProps, SyncType} from "@/context/BooksSyncContext";
-import {SeriesSyncContext, SeriesSyncContextProps, SeriesSyncType} from "@/context/SeriesSyncContext";
-import {BookSyncCompare, SyncedBook} from "@/lib/models/SyncedBook";
-import {SeriesSyncCompare, SyncedSeries} from "@/lib/models/SyncedSeries";
-import {SeriesListItemProps} from "@/lib/models/Series";
+import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
+import {SeriesListItemProps} from "@/lib/types/series";
 import SeriesCard, {SeriesCardProps} from "@/components/series/SeriesCard";
 import SeriesSetting from "@/components/series/SeriesSetting";
 
@@ -30,32 +29,19 @@ interface CategoryItem {
 }
 
 export default function BookList() {
-    const {session, setSession} = useContext(SessionContext);
+    const {session, setSession}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
     const accessToken: string = session?.accessToken || '';
-    const {errorMessage} = useContext(AlertContext);
-    const {setBook} = useContext(BookContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const router = useRouter();
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {isCurrentlyOffline, offlineMode} = useContext<OfflineContextType>(OfflineContext);
-    const {
-        booksToSyncFromServer,
-        booksToSyncToServer,
-        serverOnlyBooks,
-        localOnlyBooks,
-        serverSyncedBooks
-    } = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {
-        seriesToSyncFromServer,
-        seriesToSyncToServer,
-        serverOnlySeries,
-        localOnlySeries
-    } = useContext<SeriesSyncContextProps>(SeriesSyncContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext)
+    const {serverSyncedBooks}: BooksSyncContextProps = useContext<BooksSyncContextProps>(BooksSyncContext)
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
 
     const [searchQuery, setSearchQuery] = useState<string>('');
     const [groupedItems, setGroupedItems] = useState<Record<string, CategoryItem[]>>({});
     const [isLoadingBooks, setIsLoadingBooks] = useState<boolean>(true);
     const [showSeriesSettingId, setShowSeriesSettingId] = useState<string | null>(null);
-    const [isLocalSeries, setIsLocalSeries] = useState<boolean>(false);
     const carouselRefs = useRef<Record<string, HTMLDivElement | null>>({});
 
     const [bookGuide, setBookGuide] = useState<boolean>(false);
@@ -92,240 +78,165 @@ export default function BookList() {
             content: (
                 <div>
                     <p>
-                        <FontAwesomeIcon icon={faGear} className="mr-2 text-primary w-5 h-5"/>
+                        <Settings strokeWidth={1.75} className="mr-2 text-primary w-5 h-5 inline"/>
                         {t("bookList.guideStep2ContentGear")}
                     </p>
                     <p>
-                        <FontAwesomeIcon icon={faDownload} className="mr-2 text-primary w-5 h-5"/>
+                        <Download strokeWidth={1.75} className="mr-2 text-primary w-5 h-5 inline"/>
                         {t("bookList.guideStep2ContentDownload")}
                     </p>
                     <p>
-                        <FontAwesomeIcon icon={faTrash} className="mr-2 text-primary w-5 h-5"/>
+                        <Trash2 strokeWidth={1.75} className="mr-2 text-primary w-5 h-5 inline"/>
                         {t("bookList.guideStep2ContentTrash")}
                     </p>
                 </div>
             ),
         },
-    ];
+    ]
 
     useEffect((): void => {
-        if (groupedItems && Object.keys(groupedItems).length > 0 && User.guideTourDone(session.user?.guideTour || [], 'new-first-book')) {
+        if (groupedItems && Object.keys(groupedItems).length > 0 && guideTourDone(session.user?.guideTour || [], 'new-first-book')) {
             setBookGuide(true);
         }
     }, [groupedItems]);
 
     useEffect((): void => {
-        const shouldFetch: boolean | "" =
-            (session.isConnected || accessToken) &&
-            (!isCurrentlyOffline() || offlineMode.isDatabaseInitialized);
+        loadBooksAndSeries().then()
+    }, [serverSyncedBooks]);
 
-        if (shouldFetch) {
-            loadBooksAndSeries().then();
-        }
-    }, [
-        session.isConnected,
-        accessToken,
-        offlineMode.isDatabaseInitialized,
-        offlineMode.isOffline,
-        booksToSyncFromServer,
-        booksToSyncToServer,
-        serverOnlyBooks,
-        localOnlyBooks,
-        serverSyncedBooks
-    ]);
+    useEffect((): void => {
+        if (accessToken) loadBooksAndSeries().then();
+    }, [accessToken]);
 
     async function handleFirstBookGuide(): Promise<void> {
         try {
-            if (!isCurrentlyOffline()) {
-                const response: boolean = await System.authPostToServer<boolean>(
-                    'logs/tour',
-                    {plateforme: 'desktop', tour: 'new-first-book'},
-                    session.accessToken, lang
-                );
-                if (response) {
-                    setSession(User.setNewGuideTour(session, 'new-first-book'));
-                    setBookGuide(false);
-                }
-            } else {
-                const completedGuides = JSON.parse(localStorage.getItem('completedGuides') || '[]');
-                if (!completedGuides.includes('new-first-book')) {
-                    completedGuides.push('new-first-book');
-                    localStorage.setItem('completedGuides', JSON.stringify(completedGuides));
-                }
-                setSession(User.setNewGuideTour(session, 'new-first-book'));
+            const response: boolean = await apiPost<boolean>(
+                'logs/tour',
+                {plateforme: 'web', tour: 'new-first-book'},
+                session.accessToken, lang
+            );
+            if (response) {
+                setSession(setNewGuideTour(session, 'new-first-book'));
                 setBookGuide(false);
             }
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
+        } catch (error: unknown) {
+            if (error instanceof Error) {
+                errorMessage(error.message);
             } else {
                 errorMessage(t("bookList.errorBookCreate"));
             }
         }
     }
-
+    
     async function loadBooksAndSeries(): Promise<void> {
         setIsLoadingBooks(true);
         try {
-            let booksResponse: (BookProps & { itIsLocal?: boolean })[] = [];
-            let seriesResponse: SeriesListItemProps[] = [];
-
-            // ═══════════════════════════════════════════════════════════════
-            // PARTIE 1 : FETCH DES DONNÉES (dual logic)
-            // ═══════════════════════════════════════════════════════════════
-
-            if (!isCurrentlyOffline()) {
-                // ONLINE : fetch serveur + local en parallèle
-                const [onlineBooks, localBooks, onlineSeries, localSeries] = await Promise.all([
-                    System.authGetQueryToServer<BookProps[]>('books', accessToken, lang),
-                    offlineMode.isDatabaseInitialized
-                        ? tauri.getBooks()
-                        : Promise.resolve([]),
-                    System.authGetQueryToServer<SeriesListItemProps[]>('series/list', accessToken, lang),
-                    offlineMode.isDatabaseInitialized
-                        ? tauri.getSeriesList() as Promise<SeriesListItemProps[]>
-                        : Promise.resolve([])
-                ]);
-
-                // Merge des livres (serveur + locaux uniques)
-                const onlineBookIds = new Set(onlineBooks.map(b => b.bookId));
-                const uniqueLocalBooks = localBooks.filter(b => !onlineBookIds.has(b.bookId));
-                booksResponse = [
-                    ...onlineBooks.map(b => ({...b, itIsLocal: false})),
-                    ...uniqueLocalBooks.map(b => ({...b, itIsLocal: true}))
-                ];
-
-                // Merge des séries (serveur + locales uniques)
-                // Pour les séries synced, on merge les bookIds (serveur + local-only)
-                const localSeriesMap = new Map(localSeries.map(s => [s.id, s]));
-                const mergedOnlineSeries = onlineSeries.map(serverSeries => {
-                    const localVersion = localSeriesMap.get(serverSeries.id);
-                    if (localVersion) {
-                        // Merger les bookIds : serveur + ceux du local qui ne sont pas sur le serveur
-                        const serverBookIds = new Set(serverSeries.bookIds);
-                        const localOnlyBookIds = localVersion.bookIds.filter(id => !serverBookIds.has(id));
-                        return {
-                            ...serverSeries,
-                            bookIds: [...serverSeries.bookIds, ...localOnlyBookIds]
-                        };
-                    }
-                    return serverSeries;
-                });
-                const onlineSeriesIds = new Set(onlineSeries.map(s => s.id));
-                const uniqueLocalSeries = localSeries.filter(s => !onlineSeriesIds.has(s.id));
-                seriesResponse = [...mergedOnlineSeries, ...uniqueLocalSeries];
-
+            let booksResponse: BookProps[];
+            let seriesResponse: SeriesListItemProps[];
+            if (isDesktop && isCurrentlyOffline()) {
+                booksResponse = await tauri.getBooks() as BookProps[];
+                seriesResponse = await tauri.getSeriesList() as SeriesListItemProps[];
             } else {
-                // OFFLINE : local seulement
-                if (!offlineMode.isDatabaseInitialized) {
-                    setIsLoadingBooks(false);
-                    return;
-                }
-                const [localBooks, localSeries] = await Promise.all([
-                    tauri.getBooks(),
-                    tauri.getSeriesList() as Promise<SeriesListItemProps[]>
+                [booksResponse, seriesResponse] = await Promise.all([
+                    apiGet<BookProps[]>('books', accessToken, lang),
+                    apiGet<SeriesListItemProps[]>('series/list', accessToken, lang)
                 ]);
-                booksResponse = localBooks.map(b => ({...b, itIsLocal: true}));
-                seriesResponse = localSeries;
             }
-
-            // ═══════════════════════════════════════════════════════════════
-            // PARTIE 2 : CRÉATION DU MAPPING BOOK → SERIES
-            // ═══════════════════════════════════════════════════════════════
-
-            const bookToSeriesMap: Map<string, SeriesListItemProps> = new Map();
-            seriesResponse.forEach((series: SeriesListItemProps): void => {
-                series.bookIds.forEach((bookId: string): void => {
-                    bookToSeriesMap.set(bookId, series);
+            
+            if (booksResponse) {
+                const seriesList: SeriesListItemProps[] = seriesResponse || [];
+                
+                // Créer un mapping bookId -> seriesInfo
+                const bookToSeriesMap: Map<string, SeriesListItemProps> = new Map();
+                seriesList.forEach((series: SeriesListItemProps): void => {
+                    series.bookIds.forEach((bookId: string): void => {
+                        bookToSeriesMap.set(bookId, series);
+                    });
                 });
-            });
-
-            // ═══════════════════════════════════════════════════════════════
-            // PARTIE 3 : TRANSFORMATION DES LIVRES
-            // ═══════════════════════════════════════════════════════════════
-
-            const transformedBooks: (BookProps & { itIsLocal?: boolean })[] = booksResponse.map(book => {
-                const imageDataUrl = book.coverImage ? 'data:image/jpeg;base64,' + book.coverImage : '';
-                return {
-                    bookId: book.bookId,
-                    type: Book.getBookTypeLabel(book.type),
-                    title: book.title,
-                    subTitle: book.subTitle,
-                    summary: book.summary,
-                    serie: book.serie,
-                    publicationDate: book.publicationDate,
-                    desiredWordCount: book.desiredWordCount,
-                    totalWordCount: 0,
-                    coverImage: imageDataUrl,
-                    itIsLocal: book.itIsLocal
-                };
-            });
-
-            // ═══════════════════════════════════════════════════════════════
-            // PARTIE 4 : GROUPEMENT PAR CATÉGORIE AVEC SÉRIES
-            // ═══════════════════════════════════════════════════════════════
-
-            const itemsByCategory: Record<string, CategoryItem[]> = {};
-            const processedSeriesIds: Set<string> = new Set();
-
-            transformedBooks.forEach((book): void => {
-                const categoryLabel: string = t(book.type);
-                if (!itemsByCategory[categoryLabel]) {
-                    itemsByCategory[categoryLabel] = [];
-                }
-
-                const seriesInfo = bookToSeriesMap.get(book.bookId);
-
-                if (seriesInfo && !processedSeriesIds.has(seriesInfo.id)) {
-                    // Livre fait partie d'une série non encore traitée
-                    processedSeriesIds.add(seriesInfo.id);
-
-                    // Récupérer tous les livres de cette série
-                    const seriesBooks: BookProps[] = transformedBooks.filter(
-                        b => seriesInfo.bookIds.includes(b.bookId)
-                    );
-
-                    const seriesCard: SeriesCardProps = {
-                        id: seriesInfo.id,
-                        name: seriesInfo.name,
-                        coverImage: seriesInfo.coverImage,
-                        books: seriesBooks
+                
+                // Transformer les livres avec leur image
+                const transformedBooks: BookProps[] = booksResponse.map((book: BookProps): BookProps => {
+                    const imageDataUrl: string = book.coverImage ? 'data:image/jpeg;base64,' + book.coverImage : '';
+                    return {
+                        bookId: book.bookId,
+                        type: getBookTypeLabel(book.type),
+                        title: book.title,
+                        subTitle: book.subTitle,
+                        summary: book.summary,
+                        serie: book.serie,
+                        publicationDate: book.publicationDate,
+                        desiredWordCount: book.desiredWordCount,
+                        totalWordCount: 0,
+                        coverImage: imageDataUrl,
                     };
-
-                    itemsByCategory[categoryLabel].push({
-                        type: 'series',
-                        series: seriesCard
-                    });
-                } else if (!seriesInfo) {
-                    // Livre individuel (pas dans une série)
-                    itemsByCategory[categoryLabel].push({
-                        type: 'book',
-                        book: book
-                    });
-                }
-            });
-
-            // Ajouter les séries vides (orphelines)
-            seriesResponse.forEach((series): void => {
-                if (series.bookIds.length === 0) {
-                    const emptySeriesCategory = t('bookList.emptySeries');
-                    if (!itemsByCategory[emptySeriesCategory]) {
-                        itemsByCategory[emptySeriesCategory] = [];
+                });
+                
+                // Grouper par catégorie avec séries
+                const itemsByCategory: Record<string, CategoryItem[]> = {};
+                const processedSeriesIds: Set<string> = new Set();
+                
+                transformedBooks.forEach((book: BookProps): void => {
+                    const categoryLabel: string = t(book.type);
+                    if (!itemsByCategory[categoryLabel]) {
+                        itemsByCategory[categoryLabel] = [];
                     }
-                    itemsByCategory[emptySeriesCategory].push({
-                        type: 'series',
-                        series: {
+                    
+                    const seriesInfo: SeriesListItemProps | undefined = bookToSeriesMap.get(book.bookId);
+                    
+                    if (seriesInfo && !processedSeriesIds.has(seriesInfo.id)) {
+                        // Ce livre fait partie d'une série non encore traitée
+                        processedSeriesIds.add(seriesInfo.id);
+                        
+                        // Récupérer tous les livres de cette série dans cette catégorie
+                        const seriesBooks: BookProps[] = transformedBooks.filter(
+                            (bookItem: BookProps): boolean => seriesInfo.bookIds.includes(bookItem.bookId)
+                        );
+                        
+                        const seriesCard: SeriesCardProps = {
+                            id: seriesInfo.id,
+                            name: seriesInfo.name,
+                            coverImage: seriesInfo.coverImage,
+                            books: seriesBooks
+                        };
+                        
+                        itemsByCategory[categoryLabel].push({
+                            type: 'series',
+                            series: seriesCard
+                        });
+                    } else if (!seriesInfo) {
+                        // Livre individuel (pas dans une série)
+                        itemsByCategory[categoryLabel].push({
+                            type: 'book',
+                            book: book
+                        });
+                    }
+                    // Si le livre fait partie d'une série déjà traitée, on l'ignore car il est déjà dans le SeriesCard
+                });
+                
+                // Ajouter les séries sans livres (orphelines)
+                seriesList.forEach((series: SeriesListItemProps): void => {
+                    if (series.bookIds.length === 0) {
+                        const emptySeriesCategory: string = t('bookList.emptySeries');
+                        if (!itemsByCategory[emptySeriesCategory]) {
+                            itemsByCategory[emptySeriesCategory] = [];
+                        }
+                        
+                        const emptySeriesCard: SeriesCardProps = {
                             id: series.id,
                             name: series.name,
                             coverImage: series.coverImage,
                             books: []
-                        }
-                    });
-                }
-            });
-
-            setGroupedItems(itemsByCategory);
-
+                        };
+                        
+                        itemsByCategory[emptySeriesCategory].push({
+                            type: 'series',
+                            series: emptySeriesCard
+                        });
+                    }
+                });
+                
+                setGroupedItems(itemsByCategory);
+            }
         } catch (error: unknown) {
             if (error instanceof Error) {
                 errorMessage(error.message);
@@ -336,114 +247,58 @@ export default function BookList() {
             setIsLoadingBooks(false);
         }
     }
-
+    
     function getFilteredGroupedItems(): Record<string, CategoryItem[]> {
         if (!searchQuery) {
             return groupedItems;
         }
-
+        
         const filtered: Record<string, CategoryItem[]> = {};
-
-        Object.entries(groupedItems).forEach(([category, items]) => {
-            const filteredItems = items.filter((item): boolean => {
+        
+        Object.entries(groupedItems).forEach(([category, items]: [string, CategoryItem[]]): void => {
+            const filteredItems: CategoryItem[] = items.filter((item: CategoryItem): boolean => {
                 if (item.type === 'book' && item.book) {
                     return item.book.title.toLowerCase().includes(searchQuery.toLowerCase());
                 }
                 if (item.type === 'series' && item.series) {
-                    const matchesSeriesName = item.series.name.toLowerCase().includes(searchQuery.toLowerCase());
-                    const matchesBookTitle = item.series.books.some(
-                        book => book.title.toLowerCase().includes(searchQuery.toLowerCase())
+                    // Recherche dans le nom de la série ou dans les titres des livres
+                    const matchesSeriesName: boolean = item.series.name.toLowerCase().includes(searchQuery.toLowerCase());
+                    const matchesBookTitle: boolean = item.series.books.some(
+                        (book: BookProps): boolean => book.title.toLowerCase().includes(searchQuery.toLowerCase())
                     );
                     return matchesSeriesName || matchesBookTitle;
                 }
                 return false;
             });
-
+            
             if (filteredItems.length > 0) {
                 filtered[category] = filteredItems;
             }
         });
-
+        
         return filtered;
     }
-
+    
     function getTotalItemsCount(items: CategoryItem[]): number {
-        return items.reduce((count, item) => {
-            if (item.type === 'book') return count + 1;
-            if (item.type === 'series' && item.series) return count + item.series.books.length;
+        return items.reduce((count: number, item: CategoryItem): number => {
+            if (item.type === 'book') {
+                return count + 1;
+            }
+            if (item.type === 'series' && item.series) {
+                return count + item.series.books.length;
+            }
             return count;
         }, 0);
     }
-
-    function detectBookSyncStatus(bookId: string): SyncType {
-        if (serverOnlyBooks.find((book: SyncedBook): boolean => book.id === bookId)) return 'server-only';
-        if (localOnlyBooks.find((book: SyncedBook): boolean => book.id === bookId)) return 'local-only';
-        if (booksToSyncFromServer.find((book: BookSyncCompare): boolean => book.id === bookId)) return 'to-sync-from-server';
-        if (booksToSyncToServer.find((book: BookSyncCompare): boolean => book.id === bookId)) return 'to-sync-to-server';
-        return 'synced';
+    
+    function handleBookClick(bookId: string): void {
+        router.push(`/book/${bookId}`);
     }
-
-    function detectSeriesSyncStatus(seriesId: string): SeriesSyncType {
-        if (serverOnlySeries.find((series: SyncedSeries): boolean => series.id === seriesId)) return 'server-only';
-        if (localOnlySeries.find((series: SyncedSeries): boolean => series.id === seriesId)) return 'local-only';
-        if (seriesToSyncFromServer.find((series: SeriesSyncCompare): boolean => series.id === seriesId)) return 'to-sync-from-server';
-        if (seriesToSyncToServer.find((series: SeriesSyncCompare): boolean => series.id === seriesId)) return 'to-sync-to-server';
-        return 'synced';
+    
+    function handleSeriesSettingsClick(seriesId: string): void {
+        setShowSeriesSettingId(seriesId);
     }
-
-    async function handleBookClick(bookId: string): Promise<void> {
-        try {
-            let localBookOnly: boolean = false;
-            let bookResponse: BookProps | null = null;
-
-            // DUAL LOGIC
-            const isOfflineBook = localOnlyBooks.find((book: SyncedBook): boolean => book.id === bookId);
-            if (isCurrentlyOffline() || isOfflineBook) {
-                if (isCurrentlyOffline() && !offlineMode.isDatabaseInitialized) {
-                    errorMessage(t("bookList.errorBookDetails"));
-                    return;
-                }
-                bookResponse = await tauri.getBookBasicInformation(bookId);
-                if (bookResponse) localBookOnly = true;
-            }
-            if (!bookResponse) {
-                bookResponse = await System.authGetQueryToServer<BookProps>(
-                    'book/basic-information', accessToken, lang, {id: bookId}
-                );
-            }
-
-            if (!bookResponse) {
-                errorMessage(t("bookList.errorBookDetails"));
-                return;
-            }
-
-            if (setBook) {
-                setBook({
-                    bookId: bookId,
-                    title: bookResponse.title || '',
-                    subTitle: bookResponse.subTitle || '',
-                    summary: bookResponse.summary || '',
-                    type: bookResponse.type || '',
-                    serie: bookResponse.serie,
-                    seriesId: bookResponse.seriesId,
-                    publicationDate: bookResponse.publicationDate || '',
-                    desiredWordCount: bookResponse.desiredWordCount || 0,
-                    totalWordCount: 0,
-                    localBook: localBookOnly,
-                    coverImage: bookResponse.coverImage ? 'data:image/jpeg;base64,' + bookResponse.coverImage : '',
-                    quillsenseEnabled: bookResponse.quillsenseEnabled,
-                    tools: bookResponse.tools,
-                });
-            }
-        } catch (error: unknown) {
-            if (error instanceof Error) {
-                errorMessage(error.message);
-            } else {
-                errorMessage(t("bookList.errorUnknown"));
-            }
-        }
-    }
-
+    
     function scrollCarousel(category: string, direction: 'left' | 'right'): void {
         const container: HTMLDivElement | null = carouselRefs.current[category];
         if (!container) return;
@@ -454,25 +309,18 @@ export default function BookList() {
             behavior: 'smooth'
         });
     }
-
-    function handleSeriesSettingsClick(seriesId: string): void {
-        const isLocal: boolean = isCurrentlyOffline() ||
-            Boolean(localOnlySeries.find((s: SyncedSeries): boolean => s.id === seriesId));
-        setIsLocalSeries(isLocal);
-        setShowSeriesSettingId(seriesId);
-    }
-
-    const filteredItems = getFilteredGroupedItems();
+    
+    const filteredItems: Record<string, CategoryItem[]> = getFilteredGroupedItems();
 
     return (
         <div
-            className="flex flex-col items-center h-full overflow-hidden w-full text-text-primary font-['Lora']">
-            {session?.user && (
-                <div data-guide="search-bar" className="w-full max-w-3xl px-4 pt-6 pb-4">
-                    <SearchBook searchQuery={searchQuery} setSearchQuery={setSearchQuery}/>
-                </div>
-            )}
+            className="flex flex-col h-full overflow-hidden w-full text-text-primary font-['Lora']">
             <div className="flex flex-col w-full overflow-y-auto overflow-x-hidden h-full min-h-0 flex-grow">
+                {session?.user && (
+                    <div data-guide="search-bar" className="sticky top-0 z-10 w-full flex justify-center px-4 py-3">
+                        <SearchBook searchQuery={searchQuery} setSearchQuery={setSearchQuery}/>
+                    </div>
+                )}
                 {
                     isLoadingBooks ? (
                         <>
@@ -483,10 +331,10 @@ export default function BookList() {
 
                             <div className="w-full mb-10">
                                 <div className="flex justify-between items-center w-full max-w-5xl mx-auto mb-4 px-6">
-                                    <div className="h-8 bg-secondary/30 rounded-xl w-32 animate-pulse"></div>
-                                    <div className="h-6 bg-secondary/20 rounded-lg w-24 animate-pulse"></div>
+                                    <div className="h-8 bg-secondary rounded-xl w-32 animate-pulse"></div>
+                                    <div className="h-6 bg-tertiary rounded-lg w-24 animate-pulse"></div>
                                 </div>
-
+                                
                                 <div className="flex flex-wrap justify-center items-start w-full px-4">
                                     {Array.from({length: 6}).map((_, id: number) => (
                                         <div key={id}
@@ -503,8 +351,8 @@ export default function BookList() {
                                 <h1 className="font-['ADLaM_Display'] text-4xl mb-3 text-text-primary">{t("bookList.library")}</h1>
                                 <p className="text-muted italic text-lg">{t("bookList.booksAreMirrors")}</p>
                             </div>
-
-                            {Object.entries(filteredItems).map(([category, items], index) => (
+                            
+                            {Object.entries(filteredItems).map(([category, items]: [string, CategoryItem[]], index: number) => (
                                 <div key={category} {...(index === 0 && {'data-guide': 'book-category'})}
                                      className="w-full mb-10">
                                     <div
@@ -513,33 +361,36 @@ export default function BookList() {
                                             <span className="w-1 h-8 bg-primary rounded-full"></span>
                                             {category}
                                         </h2>
-                                        <span
-                                            className="text-muted text-lg font-medium bg-secondary/30 px-4 py-1.5 rounded-full">
+                                        <Badge variant="muted" size="md">
                                             {getTotalItemsCount(items)} {t("bookList.works")}
-                                        </span>
+                                        </Badge>
                                     </div>
-
-                                    <div className="group relative w-full">
-                                        <button
-                                            onClick={() => scrollCarousel(category, 'left')}
-                                            className="absolute left-3 top-1/2 -translate-y-1/2 z-10 bg-primary/80 backdrop-blur-sm hover:bg-primary text-white rounded-2xl w-12 h-12 flex items-center justify-center shadow-xl border border-primary-light/30 transition-all duration-200 opacity-0 group-hover:opacity-100 hover:scale-110"
-                                        >
-                                            <FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5"/>
-                                        </button>
-
+                                    
+                                    <div className="group/carousel relative w-full">
                                         <div
-                                            ref={(el: HTMLDivElement | null) => { carouselRefs.current[category] = el; }}
-                                            className="flex items-start w-full overflow-hidden px-4 gap-2 scroll-smooth"
+                                            className="absolute left-3 top-1/2 -translate-y-1/2 z-10 opacity-0 group-hover/carousel:opacity-100">
+                                            <button
+                                                onClick={(): void => scrollCarousel(category, 'left')}
+                                                className="flex items-center justify-center w-11 h-11 rounded-xl bg-primary-dark hover:bg-primary text-text-primary transition-all duration-200"
+                                            >
+                                                <ChevronLeft strokeWidth={1.75} className="w-5 h-5"/>
+                                            </button>
+                                        </div>
+                                        
+                                        <div
+                                            ref={(el: HTMLDivElement | null) => {
+                                                carouselRefs.current[category] = el;
+                                            }}
+                                            className="flex items-start w-full overflow-x-auto px-4 gap-2 scroll-smooth scrollbar-hide"
                                         >
-                                            {items.map((item, idx) => {
+                                            {items.map((item: CategoryItem, idx: number) => {
                                                 if (item.type === 'book' && item.book) {
                                                     return (
                                                         <div key={item.book.bookId}
                                                              {...(idx === 0 && {'data-guide': 'book-card'})}
-                                                             className={`flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 p-2 box-border ${User.guideTourDone(session.user?.guideTour || [], 'new-first-book') && 'mb-[200px]'}`}>
+                                                             className={`flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 p-2 box-border ${guideTourDone(session.user?.guideTour || [], 'new-first-book') && 'mb-[200px]'}`}>
                                                             <BookCard
                                                                 book={item.book}
-                                                                syncStatus={detectBookSyncStatus(item.book.bookId)}
                                                                 onClickCallback={handleBookClick}
                                                                 index={idx}
                                                             />
@@ -553,21 +404,22 @@ export default function BookList() {
                                                             series={item.series}
                                                             onBookClick={handleBookClick}
                                                             onSettingsClick={handleSeriesSettingsClick}
-                                                            getSyncStatus={detectBookSyncStatus}
-                                                            seriesSyncStatus={detectSeriesSyncStatus(item.series.id)}
                                                         />
                                                     );
                                                 }
                                                 return null;
                                             })}
                                         </div>
-
-                                        <button
-                                            onClick={() => scrollCarousel(category, 'right')}
-                                            className="absolute right-3 top-1/2 -translate-y-1/2 z-10 bg-primary/80 backdrop-blur-sm hover:bg-primary text-white rounded-2xl w-12 h-12 flex items-center justify-center shadow-xl border border-primary-light/30 transition-all duration-200 opacity-0 group-hover:opacity-100 hover:scale-110"
-                                        >
-                                            <FontAwesomeIcon icon={faChevronRight} className="w-5 h-5"/>
-                                        </button>
+                                        
+                                        <div
+                                            className="absolute right-3 top-1/2 -translate-y-1/2 z-10 opacity-0 group-hover/carousel:opacity-100">
+                                            <button
+                                                onClick={(): void => scrollCarousel(category, 'right')}
+                                                className="flex items-center justify-center w-11 h-11 rounded-xl bg-primary-dark hover:bg-primary text-text-primary transition-all duration-200"
+                                            >
+                                                <ChevronRight strokeWidth={1.75} className="w-5 h-5"/>
+                                            </button>
+                                        </div>
                                     </div>
                                 </div>
                             ))}
@@ -575,9 +427,11 @@ export default function BookList() {
                     ) : (
                         <div className="flex items-center justify-center h-full">
                             <div className="text-center p-8 max-w-lg">
-                                <div
-                                    className="w-24 h-24 bg-primary/20 text-primary rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg animate-pulse">
-                                    <FontAwesomeIcon icon={faBook} className={'w-12 h-12'}/>
+                                <div className="mx-auto mb-6 w-fit">
+                                    <div
+                                        className="bg-primary/10 flex items-center justify-center w-16 h-16 rounded-2xl">
+                                        <Book strokeWidth={1.75} className="text-primary w-8 h-8"/>
+                                    </div>
                                 </div>
                                 <h2 className="text-4xl font-['ADLaM_Display'] mb-4 text-text-primary">{t("bookList.welcomeWritingWorkshop")}</h2>
                                 <p className="text-muted mb-6 text-lg leading-relaxed">
@@ -591,16 +445,8 @@ export default function BookList() {
                 bookGuide && <GuideTour stepId={0} steps={bookGuideSteps} onComplete={handleFirstBookGuide}
                                         onClose={() => setBookGuide(false)}/>
             }
-            {showSeriesSettingId && (
-                <SeriesSetting
-                    seriesId={showSeriesSettingId}
-                    localSeries={isLocalSeries}
-                    onClose={() => {
-                        setShowSeriesSettingId(null);
-                        setIsLocalSeries(false);
-                    }}
-                />
-            )}
+            {showSeriesSettingId &&
+                <SeriesSetting seriesId={showSeriesSettingId} onClose={() => setShowSeriesSettingId(null)}/>}
         </div>
     );
 }
diff --git a/components/book/ImportBookForm.tsx b/components/book/ImportBookForm.tsx
index 95a78b7..23701a9 100644
--- a/components/book/ImportBookForm.tsx
+++ b/components/book/ImportBookForm.tsx
@@ -1,48 +1,34 @@
 'use client'
-import {ChangeEvent, Dispatch, RefObject, SetStateAction, useCallback, useContext, useEffect, useRef, useState} from "react";
-import {AlertContext} from "@/context/AlertContext";
-import System from "@/lib/models/System";
-import {SessionContext} from "@/context/SessionContext";
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {
-    faBook,
-    faBookOpen,
-    faBookmark,
-    faFileImport,
-    faFileWord,
-    faLayerGroup,
-    faSpinner,
-    faSquare,
-    faSquareCheck,
-    faX
-} from "@fortawesome/free-solid-svg-icons";
-import {SelectBoxProps} from "@/shared/interface";
-import {bookTypes} from "@/lib/models/Book";
-import {chapterVersions} from "@/lib/models/Chapter";
-import {ParsedDocxResponse, ImportChapterSelection} from "@/lib/models/Import";
-import {SyncedBook} from "@/lib/models/SyncedBook";
+import React, {ChangeEvent, Dispatch, SetStateAction, useContext, useRef, useState} from "react";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {apiPost, apiUpload} from "@/lib/api/client";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {Book, BookOpen, FileInput, FileText, Layers, Pencil, Square, SquareCheck} from 'lucide-react';
+import SelectBox, {SelectBoxProps} from "@/components/form/SelectBox";
+import {bookTypes} from "@/lib/constants/book";
+import {chapterVersions} from "@/lib/constants/chapter";
+import {ImportChapterSelection, ImportConfirmBody, ParsedChapterPreview, ParsedDocxResponse} from "@/lib/types/import";
 import InputField from "@/components/form/InputField";
 import TextInput from "@/components/form/TextInput";
-import TexteAreaInput from "@/components/form/TexteAreaInput";
-import SelectBox from "@/components/form/SelectBox";
-import CancelButton from "@/components/form/CancelButton";
-import SubmitButtonWLoading from "@/components/form/SubmitButtonWLoading";
-import {useTranslations} from "next-intl";
+import TextAreaInput from "@/components/form/TextAreaInput";
+import Button from "@/components/ui/Button";
+import Badge from "@/components/ui/Badge";
+import Modal from "@/components/ui/Modal";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
 import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
+import {SyncedBook} from "@/lib/types/synced-book";
 
-const DOCX_ACCEPT: string = '.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+const docxAccept: string = '.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document';
 
 export default function ImportBookForm({setCloseForm}: { setCloseForm: Dispatch<SetStateAction<boolean>> }) {
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {setServerOnlyBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const modalRef: RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
-
-    const token: string = session?.accessToken ?? '';
-
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {setServerSyncedBooks}: BooksSyncContextProps = useContext<BooksSyncContextProps>(BooksSyncContext);
+    const fileInputRef: React.RefObject<HTMLInputElement | null> = useRef<HTMLInputElement>(null);
+    
     const [isParsing, setIsParsing] = useState<boolean>(false);
     const [isImporting, setIsImporting] = useState<boolean>(false);
     const [importId, setImportId] = useState<string>('');
@@ -52,47 +38,40 @@ export default function ImportBookForm({setCloseForm}: { setCloseForm: Dispatch<
     const [summary, setSummary] = useState<string>('');
     const [selectedBookType, setSelectedBookType] = useState<string>('short');
     const [selectedVersion, setSelectedVersion] = useState<string>('2');
-
+    
+    const token: string = session?.accessToken ?? '';
     const hasParsedFile: boolean = importId.length > 0 && chapters.length > 0;
     const selectedCount: number = chapters.filter((chapter: ImportChapterSelection): boolean => chapter.selected).length;
-    const canImport: boolean = !isImporting && hasParsedFile && selectedCount > 0 && title.trim().length > 0;
-
-    useEffect((): () => void => {
-        document.body.style.overflow = 'hidden';
-        return (): void => {
-            document.body.style.overflow = 'auto';
-        };
-    }, []);
-
-    const handleFileChange = useCallback(async (e: ChangeEvent<HTMLInputElement>): Promise<void> => {
-        const file: File | undefined = e.target.files?.[0];
+    
+    async function handleFileChange(event: ChangeEvent<HTMLInputElement>): Promise<void> {
+        const file: File | undefined = event.target.files?.[0];
         if (!file) return;
-
+        
         if (!file.name.endsWith('.docx')) {
             errorMessage(t('importBook.error.invalidFormat'));
             return;
         }
-
+        
         setIsParsing(true);
         setImportId('');
         setChapters([]);
-
+        
         try {
-            const response: ParsedDocxResponse = await System.authUploadFileToServer<ParsedDocxResponse>(
+            const response: ParsedDocxResponse = await apiUpload<ParsedDocxResponse>(
                 'book/import/parse',
                 file,
                 token,
-                lang,
+                lang
             );
-
+            
             setImportId(response.importId);
             setChapters(
-                response.chapters.map((chapter: { index: number; title: string; wordCount: number }): ImportChapterSelection => ({
+                response.chapters.map((chapter: ParsedChapterPreview): ImportChapterSelection => ({
                     index: chapter.index,
                     title: chapter.title,
                     wordCount: chapter.wordCount,
                     selected: true,
-                })),
+                }))
             );
         } catch (parseError: unknown) {
             if (parseError instanceof Error) {
@@ -103,26 +82,26 @@ export default function ImportBookForm({setCloseForm}: { setCloseForm: Dispatch<
         } finally {
             setIsParsing(false);
         }
-    }, [token, lang, errorMessage, t]);
-
-    const toggleChapter = useCallback((chapterIndex: number): void => {
+    }
+    
+    function toggleChapter(chapterIndex: number): void {
         setChapters((previousChapters: ImportChapterSelection[]): ImportChapterSelection[] =>
             previousChapters.map((chapter: ImportChapterSelection): ImportChapterSelection =>
-                chapter.index === chapterIndex ? {...chapter, selected: !chapter.selected} : chapter,
-            ),
+                chapter.index === chapterIndex ? {...chapter, selected: !chapter.selected} : chapter
+            )
         );
-    }, []);
-
-    const toggleAllChapters = useCallback((selectAll: boolean): void => {
+    }
+    
+    function toggleAllChapters(selectAll: boolean): void {
         setChapters((previousChapters: ImportChapterSelection[]): ImportChapterSelection[] =>
             previousChapters.map((chapter: ImportChapterSelection): ImportChapterSelection => ({
                 ...chapter,
                 selected: selectAll,
-            })),
+            }))
         );
-    }, []);
-
-    const handleImport = useCallback(async (): Promise<void> => {
+    }
+    
+    async function handleImport(): Promise<void> {
         if (!title.trim()) {
             errorMessage(t('importBook.error.titleRequired'));
             return;
@@ -135,33 +114,36 @@ export default function ImportBookForm({setCloseForm}: { setCloseForm: Dispatch<
             errorMessage(t('importBook.error.noChaptersSelected'));
             return;
         }
-
+        
         setIsImporting(true);
         try {
             const selectedChapterIndexes: number[] = chapters
                 .filter((chapter: ImportChapterSelection): boolean => chapter.selected)
                 .map((chapter: ImportChapterSelection): number => chapter.index);
-
-            await System.authPostToServer<{ bookId: string }>(
-                'book/import',
-                {
-                    importId,
-                    title: title.trim(),
-                    subTitle: subTitle.trim(),
-                    summary: summary.trim(),
-                    type: selectedBookType,
-                    version: parseInt(selectedVersion, 10),
-                    selectedChapterIndexes,
-                },
-                token,
-                lang,
-            );
-
-            setServerOnlyBooks((prevBooks: SyncedBook[]): SyncedBook[] => [...prevBooks, {
-                id: importId,
-                type: selectedBookType,
+            
+            const importBody: ImportConfirmBody = {
+                importId,
                 title: title.trim(),
                 subTitle: subTitle.trim(),
+                summary: summary.trim(),
+                type: selectedBookType,
+                version: parseInt(selectedVersion, 10),
+                selectedChapterIndexes,
+            };
+            
+            const importResponse: { bookId: string } = await apiPost<{ bookId: string }>(
+                'book/import',
+                importBody,
+                token,
+                lang
+            );
+            
+            const newBook: SyncedBook = {
+                id: importResponse.bookId,
+                type: selectedBookType,
+                title: title.trim(),
+                subTitle: subTitle.trim() || null,
+                seriesId: null,
                 lastUpdate: new Date().getTime() / 1000,
                 chapters: [],
                 characters: [],
@@ -173,12 +155,9 @@ export default function ImportBookForm({setCloseForm}: { setCloseForm: Dispatch<
                 actSummaries: [],
                 guideLine: null,
                 aiGuideLine: null,
-                bookTools: null,
-                seriesId: null,
-                spells: [],
-                spellTags: []
-            }]);
-
+            };
+            setServerSyncedBooks((prev: SyncedBook[]): SyncedBook[] => [...prev, newBook]);
+            
             successMessage(t('importBook.success'));
             setCloseForm(false);
         } catch (importError: unknown) {
@@ -190,160 +169,143 @@ export default function ImportBookForm({setCloseForm}: { setCloseForm: Dispatch<
         } finally {
             setIsImporting(false);
         }
-    }, [title, subTitle, summary, selectedBookType, selectedVersion, importId, chapters, selectedCount, token, lang, errorMessage, successMessage, t, setCloseForm, setServerOnlyBooks]);
-
+    }
+    
     return (
-        <div className="fixed inset-0 flex items-center justify-center bg-black/60 z-50 backdrop-blur-md animate-fadeIn">
-            <div ref={modalRef}
-                 className="bg-tertiary/95 backdrop-blur-sm text-text-primary rounded-2xl border border-secondary/50 shadow-2xl md:w-3/4 xl:w-1/4 lg:w-2/4 sm:w-11/12 max-h-[85vh] flex flex-col">
-                <div className="flex justify-between items-center bg-primary px-6 py-4 rounded-t-2xl shadow-lg">
-                    <h2 className="flex items-center gap-3 font-['ADLaM_Display'] text-2xl text-text-primary">
-                        <FontAwesomeIcon icon={faFileImport} className="w-6 h-6"/>
-                        {t("importBook.header.title")}
-                    </h2>
-                    <button
-                        className="text-background hover:text-background w-10 h-10 rounded-xl hover:bg-white/20 transition-all duration-200 flex items-center justify-center hover:scale-110"
-                        onClick={(): void => setCloseForm(false)}
-                    >
-                        <FontAwesomeIcon icon={faX} className={'w-5 h-5'}/>
-                    </button>
-                </div>
-
-                <div className="p-5 overflow-y-auto flex-grow custom-scrollbar">
-                    <div className="space-y-6">
-                        <label
-                            className={`flex items-center justify-center gap-3 py-4 border-2 border-dashed border-primary rounded-xl cursor-pointer
-                                bg-secondary/20 hover:bg-secondary/40 transition-all duration-200
-                                ${isParsing ? 'opacity-70 pointer-events-none' : ''}`}
-                        >
-                            {isParsing ? (
-                                <FontAwesomeIcon icon={faSpinner} className="w-5 h-5 text-primary animate-spin"/>
-                            ) : (
-                                <FontAwesomeIcon icon={faFileWord} className="w-5 h-5 text-primary"/>
-                            )}
-                            <span className="font-['ADLaM_Display'] text-primary">
-                                {isParsing ? t('importBook.parsing') : t('importBook.pickFile')}
-                            </span>
-                            <input
-                                type="file"
-                                accept={DOCX_ACCEPT}
-                                onChange={handleFileChange}
-                                className="hidden"
-                                disabled={isParsing}
-                            />
-                        </label>
-
-                        {hasParsedFile && (
-                            <>
-                                <InputField icon={faBookOpen} fieldName={t("importBook.fields.type.label")} input={
-                                    <SelectBox
-                                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setSelectedBookType(e.target.value)}
-                                        data={bookTypes.map((types: SelectBoxProps): SelectBoxProps => ({
-                                            value: types.value,
-                                            label: t(types.label)
-                                        }))}
-                                        defaultValue={selectedBookType}
-                                    />
-                                }/>
-
-                                <InputField icon={faBook} fieldName={t("importBook.fields.title.label")} input={
-                                    <TextInput
-                                        value={title}
-                                        setValue={(e: ChangeEvent<HTMLInputElement>): void => setTitle(e.target.value)}
-                                        placeholder={t("importBook.fields.title.placeholder")}
-                                    />
-                                }/>
-
-                                <InputField icon={faBookmark} fieldName={t("importBook.fields.subTitle.label")} input={
-                                    <TextInput
-                                        value={subTitle}
-                                        setValue={(e: ChangeEvent<HTMLInputElement>): void => setSubTitle(e.target.value)}
-                                        placeholder={t("importBook.fields.subTitle.placeholder")}
-                                    />
-                                }/>
-
-                                <InputField icon={faBook} fieldName={t("importBook.fields.summary.label")} input={
-                                    <TexteAreaInput
-                                        value={summary}
-                                        setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setSummary(e.target.value)}
-                                        placeholder={t("importBook.fields.summary.placeholder")}
-                                    />
-                                }/>
-
-                                <InputField icon={faLayerGroup} fieldName={t("importBook.fields.version.label")} input={
-                                    <SelectBox
-                                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setSelectedVersion(e.target.value)}
-                                        data={chapterVersions.map((version: SelectBoxProps): SelectBoxProps => ({
-                                            value: version.value,
-                                            label: t(version.label)
-                                        }))}
-                                        defaultValue={selectedVersion}
-                                    />
-                                }/>
-
-                                <div className="mt-4">
-                                    <div className="flex justify-between items-center mb-3">
-                                        <h3 className="font-['ADLaM_Display'] text-lg text-text-primary">
-                                            {t('importBook.chapters.title')}
-                                        </h3>
-                                        <span className="text-sm text-muted">
-                                            {t('importBook.chaptersDetected', {count: chapters.length})}
+        <Modal
+            icon={FileInput}
+            title={t("importBook.header")}
+            onClose={(): void => setCloseForm(false)}
+            size="sm"
+            footer={hasParsedFile ? (
+                <>
+                    <Button variant="secondary" onClick={() => setCloseForm(false)}>{t("common.cancel")}</Button>
+                    <Button
+                        variant="primary"
+                        onClick={handleImport}
+                        isLoading={isImporting}
+                        loadingText={t("importBook.importing")}
+                        icon={FileInput}
+                    >{t("importBook.submit")}</Button>
+                </>
+            ) : undefined}
+        >
+            <input
+                ref={fileInputRef}
+                type="file"
+                accept={docxAccept}
+                onChange={handleFileChange}
+                className="hidden"
+            />
+            <Button
+                variant="dashed"
+                size="lg"
+                icon={isParsing ? undefined : FileText}
+                isLoading={isParsing}
+                loadingText={t('importBook.parsing')}
+                onClick={(): void => fileInputRef.current?.click()}
+                disabled={isParsing}
+                fullWidth
+            >
+                {t('importBook.pickFile')}
+            </Button>
+            
+            {hasParsedFile && (
+                <>
+                    <InputField icon={BookOpen} fieldName={t("importBook.fields.type")} input={
+                        <SelectBox
+                            onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setSelectedBookType(e.target.value)}
+                            data={bookTypes.map((types: SelectBoxProps): SelectBoxProps => ({
+                                value: types.value,
+                                label: t(types.label)
+                            }))}
+                            defaultValue={selectedBookType}
+                            placeholder={t("addNewBookForm.typePlaceholder")}
+                        />
+                    }/>
+                    
+                    <InputField icon={Pencil} fieldName={t("importBook.fields.title")} input={
+                        <TextInput
+                            value={title}
+                            setValue={(e: ChangeEvent<HTMLInputElement>): void => setTitle(e.target.value)}
+                            placeholder={t("addNewBookForm.bookTitlePlaceholder")}
+                        />
+                    }/>
+                    
+                    <InputField icon={Pencil} fieldName={t("importBook.fields.subTitle")} input={
+                        <TextInput
+                            value={subTitle}
+                            setValue={(e: ChangeEvent<HTMLInputElement>): void => setSubTitle(e.target.value)}
+                            placeholder={t("addNewBookForm.subtitlePlaceholder")}
+                        />
+                    }/>
+                    
+                    <InputField icon={Book} fieldName={t("importBook.fields.summary")} input={
+                        <TextAreaInput
+                            value={summary}
+                            setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setSummary(e.target.value)}
+                            placeholder={t("addNewBookForm.summaryPlaceholder")}
+                        />
+                    }/>
+                    
+                    <InputField icon={Layers} fieldName={t("importBook.fields.version")} input={
+                        <SelectBox
+                            onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => setSelectedVersion(e.target.value)}
+                            data={chapterVersions.map((version: SelectBoxProps): SelectBoxProps => ({
+                                value: version.value,
+                                label: t(version.label)
+                            }))}
+                            defaultValue={selectedVersion}
+                            placeholder={""}
+                        />
+                    }/>
+                    
+                    <div className="mt-2">
+                        <div className="flex justify-between items-center mb-3">
+                            <h3 className="text-text-primary text-xl font-['ADLaM_Display'] font-medium flex items-center gap-2">
+                                <BookOpen className="text-primary w-5 h-5" strokeWidth={1.75}/>
+                                {t('importBook.chapters.title')}
+                            </h3>
+                            <Badge variant="muted" size="sm">
+                                {t('importBook.chapters.detected', {count: chapters.length})}
+                            </Badge>
+                        </div>
+                        
+                        <div className="mb-3 hover:underline w-fit">
+                            <Button variant="ghost" size="sm"
+                                    onClick={(): void => toggleAllChapters(selectedCount < chapters.length)}>
+                                {selectedCount === chapters.length
+                                    ? t('importBook.chapters.deselectAll')
+                                    : t('importBook.chapters.selectAll')}
+                            </Button>
+                        </div>
+                        
+                        <div className="space-y-1">
+                            {chapters.map((chapter: ImportChapterSelection) => (
+                                <button
+                                    key={chapter.index}
+                                    onClick={(): void => toggleChapter(chapter.index)}
+                                    className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-secondary transition-all duration-150"
+                                >
+                                    {chapter.selected
+                                        ? <SquareCheck className="w-4 h-4 text-primary" strokeWidth={1.75}/>
+                                        : <Square className="w-4 h-4 text-muted" strokeWidth={1.75}/>
+                                    }
+                                    <div className="flex-1 text-left">
+                                        <span
+                                            className={`text-sm font-medium block truncate ${chapter.selected ? 'text-text-primary' : 'text-muted'}`}>
+                                            {chapter.title}
+                                        </span>
+                                        <span className="text-xs text-muted">
+                                            {chapter.wordCount.toLocaleString('fr-FR')} {t('importBook.chapters.words')}
                                         </span>
                                     </div>
-
-                                    <button
-                                        onClick={(): void => toggleAllChapters(selectedCount < chapters.length)}
-                                        className="text-sm text-primary hover:text-primary/80 mb-3 transition-colors"
-                                    >
-                                        {selectedCount === chapters.length
-                                            ? t('importBook.chapters.deselectAll')
-                                            : t('importBook.chapters.selectAll')}
-                                    </button>
-
-                                    <div className="space-y-1">
-                                        {chapters.map((chapter: ImportChapterSelection) => (
-                                            <button
-                                                key={chapter.index}
-                                                onClick={(): void => toggleChapter(chapter.index)}
-                                                className="flex items-center gap-3 w-full py-2 px-3 rounded-lg hover:bg-secondary/30 transition-colors text-left"
-                                            >
-                                                <FontAwesomeIcon
-                                                    icon={chapter.selected ? faSquareCheck : faSquare}
-                                                    className={`w-4 h-4 ${chapter.selected ? 'text-primary' : 'text-muted'}`}
-                                                />
-                                                <div className="flex-1 min-w-0">
-                                                    <p className={`text-sm truncate ${chapter.selected ? 'text-text-primary' : 'text-muted'}`}>
-                                                        {chapter.title}
-                                                    </p>
-                                                    <p className="text-xs text-muted">
-                                                        {t('importBook.chapters.words', {count: chapter.wordCount})}
-                                                    </p>
-                                                </div>
-                                            </button>
-                                        ))}
-                                    </div>
-                                </div>
-                            </>
-                        )}
-                    </div>
-                </div>
-
-                {hasParsedFile && (
-                    <div className="flex justify-between items-center p-5 border-t border-secondary/50 bg-secondary/20 rounded-b-2xl">
-                        <div></div>
-                        <div className="flex gap-3">
-                            <CancelButton callBackFunction={() => setCloseForm(false)}/>
-                            <SubmitButtonWLoading
-                                callBackAction={handleImport}
-                                isLoading={isImporting}
-                                text={t("importBook.submit")}
-                                loadingText={t("importBook.importing")}
-                                icon={faFileImport}
-                            />
+                                </button>
+                            ))}
                         </div>
                     </div>
-                )}
-            </div>
-        </div>
+                </>
+            )}
+        </Modal>
     );
 }
diff --git a/components/book/SearchBook.tsx b/components/book/SearchBook.tsx
index babe067..dbc1516 100644
--- a/components/book/SearchBook.tsx
+++ b/components/book/SearchBook.tsx
@@ -1,8 +1,6 @@
-import {faSearch} from "@fortawesome/free-solid-svg-icons";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {ChangeEvent, Dispatch, SetStateAction} from "react";
-import {useTranslations} from "next-intl";
-import TextInput from "@/components/form/TextInput";
+import {Search} from 'lucide-react';
+import React, {ChangeEvent, Dispatch, SetStateAction} from "react";
+import {useTranslations} from '@/lib/i18n';
 
 export default function SearchBook(
     {
@@ -15,20 +13,16 @@ export default function SearchBook(
     const t = useTranslations();
 
     return (
-        <div className="flex items-center relative my-5 w-full max-w-3xl">
-            <div className="relative flex-grow">
-                <div className="relative">
-                    <FontAwesomeIcon icon={faSearch}
-                                     className="absolute left-4 top-1/2 transform -translate-y-1/2 text-primary w-5 h-5 pointer-events-none z-10"/>
-                    <div className="pl-11">
-                        <TextInput
-                            value={searchQuery}
-                            setValue={(e: ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
-                            placeholder={t("searchBook.placeholder")}
-                        />
-                    </div>
-                </div>
-            </div>
+        <div
+            className="flex items-center gap-3 w-full max-w-3xl bg-secondary rounded-xl px-4 py-2.5 border border-secondary hover:bg-gray-dark hover:border-gray-dark focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20 transition-all duration-200">
+            <Search className="text-muted w-4 h-4 flex-shrink-0" strokeWidth={1.75}/>
+            <input
+                type="text"
+                value={searchQuery}
+                onChange={(e: ChangeEvent<HTMLInputElement>): void => setSearchQuery(e.target.value)}
+                placeholder={t("searchBook.placeholder")}
+                className="w-full bg-transparent text-text-primary text-sm placeholder:text-muted outline-none"
+            />
         </div>
     )
 }
diff --git a/components/book/settings/BasicInformationSetting.tsx b/components/book/settings/BasicInformationSetting.tsx
index dc3e504..034dd5e 100644
--- a/components/book/settings/BasicInformationSetting.tsx
+++ b/components/book/settings/BasicInformationSetting.tsx
@@ -1,38 +1,35 @@
 'use client'
-import * as tauri from '@/lib/tauri';
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faFeather, faTimes} from "@fortawesome/free-solid-svg-icons";
-import {ChangeEvent, forwardRef, useContext, useImperativeHandle, useState} from "react";
-import System from "@/lib/models/System";
+import {X} from 'lucide-react';
+import IconButton from "@/components/ui/IconButton";
+import React, {ChangeEvent, forwardRef, useContext, useImperativeHandle, useState} from "react";
+import {apiDelete, apiPost} from "@/lib/api/client";
 import axios, {AxiosResponse} from "axios";
-import {AlertContext} from "@/context/AlertContext";
-import {BookContext} from "@/context/BookContext";
-import {SessionContext} from "@/context/SessionContext";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
 import TextInput from "@/components/form/TextInput";
-import TexteAreaInput from "@/components/form/TexteAreaInput";
+import TextAreaInput from "@/components/form/TextAreaInput";
 import InputField from "@/components/form/InputField";
 import NumberInput from "@/components/form/NumberInput";
 import DatePicker from "@/components/form/DatePicker";
-import {configs} from "@/lib/configs";
-import {useTranslations} from "next-intl";
+import {configs, isDesktop} from "@/lib/configs";
+import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import {BookProps} from "@/lib/models/Book";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
+import {BookProps} from "@/lib/types/book";
+import {SettingRef} from "@/lib/types/settings";
+import ImageDropZone from "@/components/form/ImageDropZone";
 
-function BasicInformationSetting(props: any, ref: any) {
+function BasicInformationSetting(_props: object, ref: React.ForwardedRef<SettingRef>): React.JSX.Element {
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext)
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-
-    const {session} = useContext(SessionContext);
-    const {book, setBook} = useContext(BookContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {book, setBook}: BookContextProps = useContext<BookContextProps>(BookContext);
     const userToken: string = session?.accessToken ? session?.accessToken : '';
-    const {errorMessage, successMessage} = useContext(AlertContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
     const bookId: string = book?.bookId ? book?.bookId.toString() : '';
     
     const [currentImage, setCurrentImage] = useState<string>(book?.coverImage ?? '');
@@ -42,21 +39,14 @@ function BasicInformationSetting(props: any, ref: any) {
     const [publicationDate, setPublicationDate] = useState<string>(book?.publicationDate ? book?.publicationDate : '');
     const [wordCount, setWordCount] = useState<number>(book?.desiredWordCount ? book?.desiredWordCount : 0);
     
-    useImperativeHandle(ref, function () {
+    useImperativeHandle(ref, function (): SettingRef {
         return {
             handleSave: handleSave
         };
     });
     
-    async function handleCoverImageChange(e: ChangeEvent<HTMLInputElement>): Promise<void> {
-        const file: File | undefined = e.target.files?.[0];
-        
-        if (!file) {
-            errorMessage(t('basicInformationSetting.error.noFileSelected'));
-            return;
-        }
-        
-        const formData = new FormData();
+    async function handleCoverImageChange(file: File): Promise<void> {
+        const formData: FormData = new FormData();
         formData.append('bookId', bookId);
         formData.append('picture', file);
         
@@ -69,15 +59,15 @@ function BasicInformationSetting(props: any, ref: any) {
                 },
                 params: {
                     lang: lang,
-                    plateforme: 'desktop',
+                    plateforme: 'web',
                 },
                 data: formData,
                 responseType: 'arraybuffer'
             });
             
             const contentType: string = query.headers['content-type'] || 'image/jpeg';
-            const blob = new Blob([query.data], {type: contentType});
-            const reader = new FileReader();
+            const blob: Blob = new Blob([query.data], {type: contentType});
+            const reader: FileReader = new FileReader();
             
             reader.onloadend = function (): void {
                 if (typeof reader.result === 'string') {
@@ -87,20 +77,17 @@ function BasicInformationSetting(props: any, ref: any) {
             
             reader.readAsDataURL(blob);
         } catch (e: unknown) {
-            if (axios.isAxiosError(e)) {
-                const serverMessage: string = e.response?.data?.message || e.response?.data || e.message;
-                throw new Error(serverMessage as string);
-            } else if (e instanceof Error) {
-                throw new Error(e.message);
+            if (e instanceof Error) {
+                errorMessage(e.message);
             } else {
-                throw new Error('An unexpected error occurred');
+                errorMessage(t('basicInformationSetting.error.unknown'));
             }
         }
     }
     
     async function handleRemoveCurrentImage(): Promise<void> {
         try {
-            const response: boolean = await System.authDeleteToServer<boolean>(`book/cover/delete`, {
+            const response: boolean = await apiDelete<boolean>(`book/cover/delete`, {
                 bookId: bookId
             }, userToken, lang);
             if (!response) {
@@ -115,7 +102,7 @@ function BasicInformationSetting(props: any, ref: any) {
             }
         }
     }
-    
+
     async function handleSave(): Promise<void> {
         if (!title) {
             errorMessage(t('basicInformationSetting.error.titleRequired'));
@@ -123,22 +110,24 @@ function BasicInformationSetting(props: any, ref: any) {
         }
         try {
             let response: boolean;
-            const basicInfoData = {
-                title: title,
-                subTitle: subTitle,
-                summary: summary,
-                publicationDate: publicationDate,
-                wordCount: wordCount,
-                bookId: bookId
-            };
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.updateBookBasicInfo(basicInfoData);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.updateBookBasicInfo({
+                    bookId: bookId,
+                    title: title,
+                    subTitle: subTitle,
+                    summary: summary,
+                    publicationDate: publicationDate,
+                    wordCount: wordCount,
+                });
             } else {
-                response = await System.authPostToServer<boolean>('book/basic-information', basicInfoData, userToken, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('update_book_basic_info', {data: basicInfoData});
-                }
+                response = await apiPost<boolean>('book/basic-information', {
+                    title: title,
+                    subTitle: subTitle,
+                    summary: summary,
+                    publicationDate: publicationDate,
+                    wordCount: wordCount,
+                    bookId: bookId
+                }, userToken, lang);
             }
             if (!response) {
                 errorMessage(t('basicInformationSetting.error.update'));
@@ -156,7 +145,7 @@ function BasicInformationSetting(props: any, ref: any) {
                 publicationDate: publicationDate,
                 desiredWordCount: wordCount,
             };
-            setBook!!(updatedBook);
+            setBook(updatedBook);
             successMessage(t('basicInformationSetting.success.update'));
         } catch (e: unknown) {
             if (e instanceof Error) {
@@ -166,85 +155,62 @@ function BasicInformationSetting(props: any, ref: any) {
             }
         }
     }
-    
+
     return (
         <div className="space-y-6">
-            <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                    <InputField fieldName={t('basicInformationSetting.fields.title')} input={<TextInput
-                        value={title}
-                        setValue={(e: ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}
-                        placeholder={t('basicInformationSetting.fields.titlePlaceholder')}
-                    />}/>
-                    <InputField fieldName={t('basicInformationSetting.fields.subtitle')} input={<TextInput
-                        value={subTitle}
-                        setValue={(e: ChangeEvent<HTMLInputElement>) => setSubTitle(e.target.value)}
-                        placeholder={t('basicInformationSetting.fields.subtitlePlaceholder')}
-                    />}/>
-                </div>
-            </div>
-            
-            <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                <InputField fieldName={t('basicInformationSetting.fields.summary')} input={<TexteAreaInput
-                    value={summary}
-                    setValue={(e: ChangeEvent<HTMLTextAreaElement>) => setSummary(e.target.value)}
-                    placeholder={t('basicInformationSetting.fields.summaryPlaceholder')}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <InputField fieldName={t('basicInformationSetting.fields.title')} input={<TextInput
+                    value={title}
+                    setValue={(e: ChangeEvent<HTMLInputElement>): void => setTitle(e.target.value)}
+                    placeholder={t('basicInformationSetting.fields.titlePlaceholder')}
+                />}/>
+                <InputField fieldName={t('basicInformationSetting.fields.subtitle')} input={<TextInput
+                    value={subTitle}
+                    setValue={(e: ChangeEvent<HTMLInputElement>): void => setSubTitle(e.target.value)}
+                    placeholder={t('basicInformationSetting.fields.subtitlePlaceholder')}
                 />}/>
             </div>
             
-            <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                    <InputField fieldName={t('basicInformationSetting.fields.publicationDate')} input={
-                        <DatePicker
-                            date={publicationDate}
-                            setDate={(e: ChangeEvent<HTMLInputElement>) => setPublicationDate(e.target.value)}
-                        />
-                    }/>
-                    <InputField fieldName={t('basicInformationSetting.fields.wordCount')} input={
-                        <NumberInput value={wordCount} setValue={setWordCount}
-                                     placeholder={t('basicInformationSetting.fields.wordCountPlaceholder')}/>
-                    }/>
-                </div>
+            <InputField fieldName={t('basicInformationSetting.fields.summary')} input={<TextAreaInput
+                value={summary}
+                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setSummary(e.target.value)}
+                placeholder={t('basicInformationSetting.fields.summaryPlaceholder')}
+            />}/>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <InputField fieldName={t('basicInformationSetting.fields.publicationDate')} input={
+                    <DatePicker
+                        date={publicationDate}
+                        setDate={(e: ChangeEvent<HTMLInputElement>): void => setPublicationDate(e.target.value)}
+                    />
+                }/>
+                <InputField fieldName={t('basicInformationSetting.fields.wordCount')} input={
+                    <NumberInput value={wordCount} setValue={setWordCount}
+                                 placeholder={t('basicInformationSetting.fields.wordCountPlaceholder')}/>
+                }/>
             </div>
             
-            <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
+            <div>
                 {currentImage ? (
                     <div className="flex justify-center">
                         <div className="relative w-40">
                             <img src={currentImage} alt={t('basicInformationSetting.fields.coverImageAlt')}
-                                 className="rounded-lg border border-secondary shadow-md w-full h-auto"/>
-                            <button
-                                type="button"
-                                className="absolute -top-2 -right-2 bg-error/90 hover:bg-error text-white rounded-full w-8 h-8 flex items-center justify-center hover:scale-110 transition-all duration-200 shadow-lg"
-                                onClick={handleRemoveCurrentImage}
-                            >
-                                <FontAwesomeIcon icon={faTimes} className={'w-5 h-5'}/>
-                            </button>
-                        </div>
-                    </div>
-                ) : (
-                    <div className="flex justify-center">
-                        <div className="w-full max-w-lg">
-                            <div
-                                className="p-6 border-2 border-dashed border-secondary/50 rounded-xl bg-secondary/20 hover:border-primary/60 hover:bg-secondary/30 transition-all duration-200 shadow-inner">
-                                <InputField fieldName={t('basicInformationSetting.fields.coverImage')}
-                                            actionIcon={faFeather}
-                                            actionLabel={t('basicInformationSetting.fields.generateWithQuillSense')}
-                                            action={async () => {
-                                            }} input={<input
-                                    type="file"
-                                    id="coverImage"
-                                    accept="image/png, image/jpeg"
-                                    onChange={handleCoverImageChange}
-                                    className="w-full text-text-secondary focus:outline-none file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-background hover:file:bg-primary-dark file:cursor-pointer"
-                                />}/>
+                                 className="rounded-lg border border-secondary w-full h-auto"/>
+                            <div className="absolute -top-2 -right-2">
+                                <IconButton icon={X} variant="danger" size="sm"
+                                            onClick={handleRemoveCurrentImage}/>
                             </div>
                         </div>
                     </div>
+                ) : (
+                    <ImageDropZone
+                        onFileSelect={handleCoverImageChange}
+                        label={t('basicInformationSetting.fields.coverImage')}
+                    />
                 )}
             </div>
         </div>
     );
 }
 
-export default forwardRef(BasicInformationSetting);
\ No newline at end of file
+export default forwardRef<SettingRef, object>(BasicInformationSetting);
\ No newline at end of file
diff --git a/components/book/settings/BookSetting.tsx b/components/book/settings/BookSetting.tsx
index e8e3104..89303b2 100644
--- a/components/book/settings/BookSetting.tsx
+++ b/components/book/settings/BookSetting.tsx
@@ -2,8 +2,8 @@
 import {useState} from "react";
 import BookSettingSidebar from "@/components/book/settings/BookSettingSidebar";
 import BookSettingOption from "@/components/book/settings/BookSettingOption";
-import SettingsPanel from "@/components/SettingsPanel";
-import {useTranslations} from "next-intl";
+import SettingsPanel from "@/components/ui/SettingsPanel";
+import {useTranslations} from '@/lib/i18n';
 
 interface BookSettingProps {
     onClose: () => void;
@@ -19,7 +19,7 @@ export default function BookSetting({onClose}: BookSettingProps) {
             sidebar={<BookSettingSidebar selectedSetting={currentSetting} setSelectedSetting={setCurrentSetting}/>}
             onClose={onClose}
         >
-            <BookSettingOption setting={currentSetting}/>
+            <BookSettingOption key={currentSetting} setting={currentSetting}/>
         </SettingsPanel>
     );
 }
diff --git a/components/book/settings/BookSettingOption.tsx b/components/book/settings/BookSettingOption.tsx
index cda7011..fb8810f 100644
--- a/components/book/settings/BookSettingOption.tsx
+++ b/components/book/settings/BookSettingOption.tsx
@@ -1,17 +1,24 @@
 'use client'
-import React, {lazy, Suspense, useRef} from 'react';
-import {faPen, faSave} from '@fortawesome/free-solid-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSpinner} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
-import PanelHeader from '@/components/PanelHeader';
+import React, {lazy, Suspense, useContext, useRef, useState} from 'react';
+import {Save} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import SectionHeader from "@/components/ui/SectionHeader";
+import IconButton from "@/components/ui/IconButton";
+import PulseLoader from '@/components/ui/PulseLoader';
+import ToggleSwitch from "@/components/form/ToggleSwitch";
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+import {apiPatch} from "@/lib/api/client";
+import {SettingRef} from "@/lib/types/settings";
+import {BookProps} from "@/lib/types/book";
 
-// Lazy loaded components - avec ref (anciens)
 const BasicInformationSetting = lazy(function () {
     return import('./BasicInformationSetting');
 });
 const GuideLineSetting = lazy(function () {
-    return import('./guide-line/GuideLineSetting');
+    return import('./guideline/GuideLineSetting');
 });
 const StorySetting = lazy(function () {
     return import('./story/StorySetting');
@@ -19,8 +26,6 @@ const StorySetting = lazy(function () {
 const QuillSenseSetting = lazy(function () {
     return import('./quillsense/QuillSenseSetting');
 });
-
-// Lazy loaded components - sans ref (nouveaux avec leur propre header)
 const WorldSettings = lazy(function () {
     return import('./world/settings/WorldSettings');
 });
@@ -37,28 +42,41 @@ const ExportSetting = lazy(function () {
     return import('./ExportSetting');
 });
 
-function LoadingSpinner(): React.JSX.Element {
-    return (
-        <div className="flex items-center justify-center py-12">
-            <FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
-        </div>
-    );
-}
-
 interface BookSettingOptionProps {
     setting: string;
 }
 
-interface SettingRef {
-    handleSave: () => Promise<void>;
-}
-
-// Settings qui gèrent leur propre save (pas de bouton save parent)
 const selfManagedSettings: string[] = ['characters', 'spells', 'world', 'worlds', 'locations', 'export'];
 
+type ToolName = 'worlds' | 'locations' | 'characters' | 'spells' | 'quillsense';
+
+const toggleableSettings: Record<string, ToolName> = {
+    'world': 'worlds',
+    'worlds': 'worlds',
+    'locations': 'locations',
+    'characters': 'characters',
+    'spells': 'spells',
+    'quillsense': 'quillsense',
+};
+
+function getInitialToolEnabled(setting: string, book: BookProps | null): boolean {
+    const toolName: ToolName | undefined = toggleableSettings[setting];
+    if (!toolName) return false;
+    if (toolName === 'quillsense') return book?.quillsenseEnabled ?? false;
+    return book?.tools?.[toolName] ?? false;
+}
+
 export default function BookSettingOption({setting}: BookSettingOptionProps): React.JSX.Element {
     const t = useTranslations();
-    const settingRef = useRef<SettingRef>(null);
+    const settingRef: React.RefObject<SettingRef | null> = useRef<SettingRef>(null);
+    const {book, setBook}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const userToken: string = session?.accessToken ?? '';
+    
+    const isToggleable: boolean = setting in toggleableSettings;
+    const [toolEnabled, setToolEnabled] = useState<boolean>(getInitialToolEnabled(setting, book));
 
     const showSaveButton: boolean = !selfManagedSettings.includes(setting);
 
@@ -86,47 +104,91 @@ export default function BookSettingOption({setting}: BookSettingOptionProps): Re
                 return "";
         }
     }
+    
+    async function handleToggleTool(enabled: boolean): Promise<void> {
+        const toolName: ToolName | undefined = toggleableSettings[setting];
+        if (!toolName) return;
+        try {
+            const result: boolean = await apiPatch<boolean>('book/tool-setting', {
+                bookId: book?.bookId,
+                toolName: toolName,
+                enabled: enabled
+            }, userToken, lang);
+            if (result && setBook && book) {
+                setToolEnabled(enabled);
+                if (toolName === 'quillsense') {
+                    setBook({...book, quillsenseEnabled: enabled});
+                } else {
+                    setBook({
+                        ...book,
+                        tools: {
+                            characters: toolName === 'characters' ? enabled : (book.tools?.characters ?? false),
+                            worlds: toolName === 'worlds' ? enabled : (book.tools?.worlds ?? false),
+                            locations: toolName === 'locations' ? enabled : (book.tools?.locations ?? false),
+                            spells: toolName === 'spells' ? enabled : (book.tools?.spells ?? false),
+                        }
+                    });
+                }
+            }
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t('bookSettingOption.unknownError'));
+            }
+        }
+    }
 
     async function handleSaveClick(): Promise<void> {
         if (settingRef.current?.handleSave) {
             await settingRef.current.handleSave();
         }
     }
+    
+    function renderHeaderActions(): React.JSX.Element {
+        return (
+            <div className="flex items-center gap-3">
+                {isToggleable && (
+                    <ToggleSwitch
+                        checked={toolEnabled}
+                        onChange={handleToggleTool}
+                        size="sm"
+                    />
+                )}
+                {showSaveButton && (
+                    <IconButton icon={Save} variant="primary" onClick={handleSaveClick}/>
+                )}
+            </div>
+        );
+    }
 
     return (
         <div className="px-6">
-            <div className="sticky top-0 z-10 bg-tertiary pt-6 pb-4">
-                <PanelHeader
-                    icon={faPen}
-                    badge="BI"
+            <div className="sticky top-0 z-10 bg-darkest-background pt-6 pb-4">
+                <SectionHeader
                     title={renderTitle()}
-                    description=""
-                    secondActionCallback={showSaveButton ? handleSaveClick : undefined}
-                    callBackAction={showSaveButton ? handleSaveClick : undefined}
-                    secondActionIcon={showSaveButton ? faSave : undefined}
+                    actions={renderHeaderActions()}
                 />
             </div>
-            <div className="bg-secondary/10 rounded-xl p-1 mb-6">
-                <Suspense fallback={<LoadingSpinner/>}>
+            <div className="mb-6">
+                <Suspense fallback={<PulseLoader/>}>
                     {setting === 'basic-information' && <BasicInformationSetting ref={settingRef}/>}
                     {setting === 'guide-line' && <GuideLineSetting ref={settingRef}/>}
                     {setting === 'story' && <StorySetting ref={settingRef}/>}
-                    {setting === 'quillsense' && <QuillSenseSetting ref={settingRef}/>}
+                    {setting === 'quillsense' && <QuillSenseSetting ref={settingRef} toolEnabled={toolEnabled}/>}
                     {(setting === 'world' || setting === 'worlds') && (
-                        <WorldSettings entityType="book" showToggle={true}/>
+                        <WorldSettings entityType="book" toolEnabled={toolEnabled}/>
                     )}
                     {setting === 'locations' && (
-                        <LocationSettings entityType="book" showToggle={true}/>
+                        <LocationSettings entityType="book" toolEnabled={toolEnabled}/>
                     )}
                     {setting === 'characters' && (
-                        <CharacterSettings entityType="book" showToggle={true}/>
+                        <CharacterSettings entityType="book" toolEnabled={toolEnabled}/>
                     )}
                     {setting === 'spells' && (
-                        <SpellSettings entityType="book" showToggle={true}/>
-                    )}
-                    {setting === 'export' && (
-                        <ExportSetting/>
+                        <SpellSettings entityType="book" toolEnabled={toolEnabled}/>
                     )}
+                    {setting === 'export' && <ExportSetting/>}
                     {!['basic-information', 'guide-line', 'story', 'world', 'worlds', 'locations', 'characters', 'spells', 'quillsense', 'export'].includes(setting) && (
                         <div className="text-text-secondary py-4 text-center">
                             {t("bookSettingOption.notAvailable")}
diff --git a/components/book/settings/BookSettingSidebar.tsx b/components/book/settings/BookSettingSidebar.tsx
index 5309c8a..1ef9fe5 100644
--- a/components/book/settings/BookSettingSidebar.tsx
+++ b/components/book/settings/BookSettingSidebar.tsx
@@ -1,26 +1,12 @@
 'use client'
-// Removed Next.js Link import for Electron
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {
-    faBook,
-    faDownload,
-    faGlobe,
-    faHatWizard,
-    faListAlt,
-    faMapMarkedAlt,
-    faPencilAlt,
-    faUser,
-    faWandMagicSparkles
-} from "@fortawesome/free-solid-svg-icons";
-import {Dispatch, SetStateAction, useContext} from "react";
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
-import {useTranslations} from "next-intl";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
+import React, {Dispatch, SetStateAction} from "react";
+import {Book, Download, Globe, List, LucideIcon, Map, Pencil, User, Wand2} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
 
 interface BookSettingOption {
     id: string;
     name: string;
-    icon: IconDefinition;
+    icon: LucideIcon;
 }
 
 export default function BookSettingSidebar(
@@ -32,92 +18,44 @@ export default function BookSettingSidebar(
         setSelectedSetting: Dispatch<SetStateAction<string>>
     }) {
     const t = useTranslations();
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
 
     const settings: BookSettingOption[] = [
-        {
-            id: 'basic-information',
-            name: 'bookSetting.basicInformation',
-            icon: faPencilAlt
-        },
-        {
-            id: 'guide-line',
-            name: 'bookSetting.guideLine',
-            icon: faListAlt
-        },
-        {
-            id: 'story',
-            name: 'bookSetting.story',
-            icon: faBook
-        },
-        {
-            id: 'world',
-            name: 'bookSetting.world',
-            icon: faGlobe
-        },
-        {
-            id: 'locations',
-            name: 'bookSetting.locations',
-            icon: faMapMarkedAlt
-        },
-        {
-            id: 'characters',
-            name: 'bookSetting.characters',
-            icon: faUser
-        },
-        {
-            id: 'spells',
-            name: 'bookSetting.spells',
-            icon: faHatWizard
-        },
-        {
-            id: 'quillsense',
-            name: 'bookSetting.quillsense',
-            icon: faWandMagicSparkles
-        },
-        {
-            id: 'export',
-            name: 'bookSetting.export',
-            icon: faDownload
-        },
-        // {
-        //     id: 'objects',
-        //     name: t('bookSetting.objects'),
-        //     icon: faLocationArrow
-        // },
-        // {
-        //     id: 'goals',
-        //     name: t('bookSetting.goals'),
-        //     icon: faCogs
-        // },
-    ]
-
-    // Filter out QuillSense when offline (requires server connection)
-    const availableSettings: BookSettingOption[] = isCurrentlyOffline()
-        ? settings.filter((s: BookSettingOption) => s.id !== 'quillsense')
-        : settings;
+        {id: 'basic-information', name: 'bookSetting.basicInformation', icon: Pencil},
+        {id: 'guide-line', name: 'bookSetting.guideLine', icon: List},
+        {id: 'story', name: 'bookSetting.story', icon: Book},
+        {id: 'world', name: 'bookSetting.world', icon: Globe},
+        {id: 'locations', name: 'bookSetting.locations', icon: Map},
+        {id: 'characters', name: 'bookSetting.characters', icon: User},
+        {id: 'spells', name: 'bookSetting.spells', icon: Wand2},
+        {id: 'quillsense', name: 'bookSetting.quillsense', icon: Wand2},
+        {id: 'export', name: 'bookSetting.export', icon: Download},
+    ];
 
     return (
-        <div className="py-6 px-3">
-            <nav className="space-y-1">
-                {
-                    availableSettings.map((setting: BookSettingOption) => (
+        <div className="py-4 px-2">
+            <nav className="space-y-0.5">
+                {settings.map((setting: BookSettingOption) => {
+                    const Icon: LucideIcon = setting.icon;
+                    const isActive: boolean = selectedSetting === setting.id;
+                    return (
                         <button
                             key={setting.id}
                             onClick={(): void => setSelectedSetting(setting.id)}
-                            type="button"
-                            className={`flex items-center text-base rounded-xl transition-all duration-200 w-full ${
-                                selectedSetting === setting.id
-                                    ? 'bg-primary/20 text-text-primary border-l-4 border-primary font-semibold shadow-md scale-105'
-                                    : 'text-text-secondary hover:bg-secondary/50 hover:text-text-primary hover:scale-102'
-                            } p-3 mb-1`}>
-                            <FontAwesomeIcon icon={setting.icon}
-                                             className={`mr-3 ${selectedSetting === setting.id ? 'text-primary w-5 h-5' : 'text-text-secondary w-5 h-5'}`}/>
+                            className={`flex items-center w-full text-sm rounded-lg transition-colors duration-150 px-3 py-2 ${
+                                isActive
+                                    ? 'bg-secondary text-text-primary font-medium'
+                                    : 'text-text-secondary hover:bg-secondary/50 hover:text-text-primary'
+                            }`}
+                        >
+                            <Icon
+                                className={`mr-2.5 w-4 h-4 flex-shrink-0 ${isActive ? 'text-primary' : 'text-muted'}`}
+                                strokeWidth={1.75}
+                            />
                             {t(setting.name)}
                         </button>
-                    ))
-                }
+                    );
+                })}
             </nav>
         </div>
-    )
+    );
 }
diff --git a/components/book/settings/DeleteBook.tsx b/components/book/settings/DeleteBook.tsx
index c3db68b..b0f7954 100644
--- a/components/book/settings/DeleteBook.tsx
+++ b/components/book/settings/DeleteBook.tsx
@@ -1,118 +1,71 @@
+import {Trash2} from 'lucide-react';
+import React, {useContext, useState} from "react";
+import IconButton from "@/components/ui/IconButton";
+import {apiDelete} from "@/lib/api/client";
+import {isDesktop} from '@/lib/configs';
 import * as tauri from '@/lib/tauri';
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faTrash} from "@fortawesome/free-solid-svg-icons";
-import {useContext, useState} from "react";
-import System from "@/lib/models/System";
-import {SessionContext} from "@/context/SessionContext";
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {BookContext, BookContextProps} from "@/context/BookContext";
 import {LangContext, LangContextProps} from "@/context/LangContext";
 import {AlertContext, AlertContextProps} from "@/context/AlertContext";
-import AlertBox from "@/components/AlertBox";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
+import AlertBox from "@/components/ui/AlertBox";
 import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
-import {useTranslations} from "next-intl";
+import {SyncedBook} from "@/lib/types/synced-book";
 
 interface DeleteBookProps {
     bookId: string;
 }
 
 export default function DeleteBook({bookId}: DeleteBookProps) {
-    const {session} = useContext(SessionContext);
-    const {lang} = useContext<LangContextProps>(LangContext)
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext)
     const [showConfirmBox, setShowConfirmBox] = useState<boolean>(false);
-    const [deleteLocalToo, setDeleteLocalToo] = useState<boolean>(false);
-    const {errorMessage} = useContext<AlertContextProps>(AlertContext)
-    const {serverOnlyBooks,setServerOnlyBooks,localOnlyBooks,setLocalOnlyBooks,localSyncedBooks,setLocalSyncedBooks,setServerSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const t = useTranslations('deleteBook');
-
-    const ifLocalOnlyBook: SyncedBook | undefined = localOnlyBooks.find((book: SyncedBook): boolean => book.id === bookId);
-    const ifSyncedBook: SyncedBook | undefined = localSyncedBooks.find((book: SyncedBook): boolean => book.id === bookId);
-
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext)
+    const {setServerSyncedBooks}: BooksSyncContextProps = useContext<BooksSyncContextProps>(BooksSyncContext)
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
+    
     function handleConfirmation(): void {
-        setDeleteLocalToo(false);
         setShowConfirmBox(true);
     }
 
     async function handleDeleteBook(): Promise<void> {
         try {
             let response: boolean;
-            const deletedAt: number = System.timeStampInSeconds();
-            const deleteData = { id: bookId, deletedAt };
-
-            if (isCurrentlyOffline() || ifLocalOnlyBook) {
-                response = await tauri.deleteBook(deleteData.id, deleteData.deletedAt);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.deleteBook(bookId, Date.now());
             } else {
-                response = await System.authDeleteToServer<boolean>(
-                    `book/delete`,
-                    deleteData,
-                    session.accessToken,
-                    lang
-                );
-                // If synced book and user wants to delete local too
-                if (response && ifSyncedBook && deleteLocalToo) {
-                    await tauri.deleteBook(deleteData.id, deleteData.deletedAt);
-                }
+                response = await apiDelete<boolean>('book/delete', {
+                    id: bookId,
+                }, session.accessToken, lang);
             }
             if (response) {
                 setShowConfirmBox(false);
-                if (ifLocalOnlyBook) {
-                    setLocalOnlyBooks(localOnlyBooks.filter((b: SyncedBook): boolean => b.id !== bookId));
-                } else if (ifSyncedBook) {
-                    // Remove from synced lists
-                    setLocalSyncedBooks(localSyncedBooks.filter((b: SyncedBook): boolean => b.id !== bookId));
-                    setServerSyncedBooks((prev: SyncedBook[]): SyncedBook[] => prev.filter((b: SyncedBook): boolean => b.id !== bookId));
-                    // If not deleting local, move to localOnlyBooks
-                    if (!deleteLocalToo) {
-                        setLocalOnlyBooks([...localOnlyBooks, ifSyncedBook]);
-                    }
-                } else {
-                    setServerOnlyBooks(serverOnlyBooks.filter((b: SyncedBook): boolean => b.id !== bookId));
+                if (!response) {
+                    errorMessage("Une erreur est survenue lors de la suppression du livre.");
+                    return;
                 }
+                setServerSyncedBooks((prev: SyncedBook[]): SyncedBook[] => prev.filter((book: SyncedBook): boolean => book.id !== bookId))
             }
         } catch (e: unknown) {
             if (e instanceof Error) {
                 errorMessage(e.message)
             } else {
-                errorMessage(t('errorUnknown'));
+                errorMessage("Une erreur inconnue est survenue lors de la suppression du livre.");
             }
         }
     }
 
     return (
         <>
-            <button onClick={handleConfirmation}
-                    className="text-muted hover:text-error hover:bg-error/10 transition-all duration-200 p-2 rounded-lg hover:scale-110">
-                <FontAwesomeIcon icon={faTrash} className={'w-5 h-5'}/>
-            </button>
+            <IconButton icon={Trash2} variant="ghost" shape="square" onClick={handleConfirmation}/>
             {
                 showConfirmBox && (
-                    <AlertBox title={t('title')}
-                              message={t('message')}
-                              type={"danger"}
-                              onConfirm={handleDeleteBook}
-                              onCancel={() => setShowConfirmBox(false)}
-                              confirmText={t('confirm')}
-                              cancelText={t('cancel')}>
-                        {ifSyncedBook && !isCurrentlyOffline() && (
-                            <div className="mt-4 p-3 bg-error/10 border border-error/30 rounded-lg">
-                                <label className="flex items-center gap-3 cursor-pointer">
-                                    <input
-                                        type="checkbox"
-                                        checked={deleteLocalToo}
-                                        onChange={(e) => setDeleteLocalToo(e.target.checked)}
-                                        className="w-5 h-5 accent-error cursor-pointer"
-                                    />
-                                    <span className="text-sm text-text-primary">
-                                        {t('deleteLocalToo')}
-                                    </span>
-                                </label>
-                                <p className="text-xs text-error mt-2">
-                                    {t('deleteLocalWarning')}
-                                </p>
-                            </div>
-                        )}
-                    </AlertBox>
+                    <AlertBox title={'Suppression du livre'}
+                              message={'Vous être sur le point de supprimer votre livre définitivement.'} type={"danger"}
+                              onConfirm={handleDeleteBook} onCancel={() => setShowConfirmBox(false)}
+                              confirmText={'Supprimer'} cancelText={'Annuler'}/>
                 )
             }
         </>
diff --git a/components/book/settings/ExportSetting.tsx b/components/book/settings/ExportSetting.tsx
index fb51421..51cbd1d 100644
--- a/components/book/settings/ExportSetting.tsx
+++ b/components/book/settings/ExportSetting.tsx
@@ -1,228 +1,288 @@
 'use client'
+import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
+import {Check} from 'lucide-react';
+import Button from '@/components/ui/Button';
+import PulseLoader from '@/components/ui/PulseLoader';
+import {useTranslations} from '@/lib/i18n';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
+import {configs, isDesktop} from '@/lib/configs';
+import {apiGet} from '@/lib/api/client';
 import * as tauri from '@/lib/tauri';
-import React, {useCallback, useContext, useEffect, useState} from 'react';
-import {useTranslations} from 'next-intl';
-import {BookContext} from '@/context/BookContext';
-import {AlertContext} from '@/context/AlertContext';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faDownload, faSpinner} from '@fortawesome/free-solid-svg-icons';
-import {
-    ChapterExportInfo,
-    ChapterExportSelection,
-    chapterVersions,
-    ExportFormat
-} from '@/lib/models/Chapter';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {LangContext, LangContextProps} from '@/context/LangContext';
+import {ChapterExportInfo, ChapterExportSelection, ExportFormat,} from '@/lib/types/chapter';
+import {chapterVersions} from '@/lib/constants/chapter';
+import {SelectBoxProps} from '@/components/form/SelectBox';
 
-const exportFormats: {value: ExportFormat; label: string}[] = [
-    {value: 'epub', label: 'EPUB'},
-    {value: 'pdf', label: 'PDF'},
-    {value: 'docx', label: 'DOCX'},
-];
+const formats: ExportFormat[] = ['epub', 'pdf', 'docx'];
+
+const formatExtensions: Record<ExportFormat, string> = {
+    epub: '.epub',
+    pdf: '.pdf',
+    docx: '.docx',
+};
 
 export default function ExportSetting(): React.JSX.Element {
     const t = useTranslations();
-    const {book} = useContext(BookContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {successMessage, errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
 
-    const [format, setFormat] = useState<ExportFormat>('epub');
-    const [chapters, setChapters] = useState<ChapterExportInfo[]>([]);
-    const [selections, setSelections] = useState<ChapterExportSelection[]>([]);
-    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [selectedFormat, setSelectedFormat] = useState<ExportFormat>('epub');
+    const [chaptersExportInfo, setChaptersExportInfo] = useState<ChapterExportInfo[]>([]);
+    const [chapterSelections, setChapterSelections] = useState<ChapterExportSelection[]>([]);
+    const [isLoadingChapters, setIsLoadingChapters] = useState<boolean>(true);
     const [isExporting, setIsExporting] = useState<boolean>(false);
-
-    const loadChapters = useCallback(async (): Promise<void> => {
-        if (!book) return;
-        setIsLoading(true);
-        try {
-            const chaptersInfo: ChapterExportInfo[] = await tauri.getBookExportInfo(book.bookId) as ChapterExportInfo[];
-            setChapters(chaptersInfo);
-            const initialSelections: ChapterExportSelection[] = chaptersInfo.map(
-                (ch: ChapterExportInfo): ChapterExportSelection => ({
-                    chapterId: ch.chapterId,
-                    version: ch.availableVersions[ch.availableVersions.length - 1],
-                    selected: true
-                })
-            );
-            setSelections(initialSelections);
-        } catch {
-            errorMessage(t('exportOption.error'));
-        } finally {
-            setIsLoading(false);
+    
+    const selectedCount: number = useMemo(
+        () => chapterSelections.filter((selection: ChapterExportSelection): boolean => selection.selected).length,
+        [chapterSelections],
+    );
+    
+    const allSelected: boolean = useMemo(
+        () => chapterSelections.length > 0 && chapterSelections.every((selection: ChapterExportSelection): boolean => selection.selected),
+        [chapterSelections],
+    );
+    
+    const canExport: boolean = useMemo(
+        () => !isExporting && selectedCount > 0,
+        [isExporting, selectedCount],
+    );
+    
+    const fetchChaptersExportInfo = useCallback(async (): Promise<void> => {
+        if (!book?.bookId) {
+            setIsLoadingChapters(false);
+            return;
         }
-    }, [book]);
-
-    useEffect((): void => {
-        loadChapters();
-    }, [loadChapters]);
-
-    function toggleChapter(chapterId: string): void {
-        setSelections((prev: ChapterExportSelection[]): ChapterExportSelection[] =>
-            prev.map((s: ChapterExportSelection): ChapterExportSelection =>
-                s.chapterId === chapterId ? {...s, selected: !s.selected} : s
-            )
-        );
-    }
-
-    function toggleAll(selectAll: boolean): void {
-        setSelections((prev: ChapterExportSelection[]): ChapterExportSelection[] =>
-            prev.map((s: ChapterExportSelection): ChapterExportSelection => ({...s, selected: selectAll}))
-        );
-    }
-
-    function updateVersion(chapterId: string, version: number): void {
-        setSelections((prev: ChapterExportSelection[]): ChapterExportSelection[] =>
-            prev.map((s: ChapterExportSelection): ChapterExportSelection =>
-                s.chapterId === chapterId ? {...s, version} : s
-            )
-        );
-    }
-
-    function getVersionLabel(version: number): string {
-        const found = chapterVersions.find((v) => v.value === String(version));
-        return found ? t(found.label) : `v${version}`;
-    }
-
-    async function handleExport(): Promise<void> {
-        if (!book) return;
-        setIsExporting(true);
+        setIsLoadingChapters(true);
         try {
-            const selectedChapters = selections
-                .filter((s: ChapterExportSelection): boolean => s.selected)
-                .map((s: ChapterExportSelection) => ({chapterId: s.chapterId, version: s.version}));
-
-            const result: boolean = await tauri.exportBook({
-                bookId: book.bookId,
-                format,
-                selections: selectedChapters.length === chapters.length ? null : selectedChapters
-            });
-
-            if (result) {
-                successMessage(t('exportOption.success'));
+            let data: ChapterExportInfo[];
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                data = await tauri.getBookExportInfo(book.bookId) as ChapterExportInfo[];
+            } else {
+                data = await apiGet<ChapterExportInfo[]>(
+                    'book/chapters/export-info', session.accessToken, lang, {id: book.bookId}
+                );
             }
+            
+            setChaptersExportInfo(data);
+            setChapterSelections(
+                data.map((chapter: ChapterExportInfo): ChapterExportSelection => ({
+                    chapterId: chapter.chapterId,
+                    version: chapter.availableVersions.length > 0
+                        ? chapter.availableVersions[chapter.availableVersions.length - 1]
+                        : 1,
+                    selected: true,
+                })),
+            );
         } catch {
-            errorMessage(t('exportOption.error'));
+            errorMessage(t('exportOption.serverError'));
+        } finally {
+            setIsLoadingChapters(false);
+        }
+    }, [book?.bookId, session.accessToken, lang, errorMessage, t]);
+    
+    useEffect((): void => {
+        fetchChaptersExportInfo();
+    }, [fetchChaptersExportInfo]);
+    
+    function toggleChapterSelection(chapterId: string): void {
+        setChapterSelections((previous: ChapterExportSelection[]): ChapterExportSelection[] =>
+            previous.map((selection: ChapterExportSelection): ChapterExportSelection =>
+                selection.chapterId === chapterId
+                    ? {...selection, selected: !selection.selected}
+                    : selection,
+            ),
+        );
+    }
+    
+    function toggleAllChapters(): void {
+        const newSelected: boolean = !allSelected;
+        setChapterSelections((previous: ChapterExportSelection[]): ChapterExportSelection[] =>
+            previous.map((selection: ChapterExportSelection): ChapterExportSelection => ({
+                ...selection,
+                selected: newSelected,
+            })),
+        );
+    }
+    
+    function setChapterVersion(chapterId: string, version: number): void {
+        setChapterSelections((previous: ChapterExportSelection[]): ChapterExportSelection[] =>
+            previous.map((selection: ChapterExportSelection): ChapterExportSelection =>
+                selection.chapterId === chapterId
+                    ? {...selection, version}
+                    : selection,
+            ),
+        );
+    }
+    
+    function getVersionLabel(version: number): string {
+        const match: SelectBoxProps | undefined = chapterVersions.find(
+            (chapterVersion: SelectBoxProps): boolean => chapterVersion.value === String(version),
+        );
+        return match ? t(match.label) : `V${version}`;
+    }
+    
+    async function handleExport(): Promise<void> {
+        if (!book?.bookId) {
+            errorMessage(t('exportOption.noBookSelected'));
+            return;
+        }
+        if (selectedCount === 0) {
+            errorMessage(t('exportOption.noChaptersSelected'));
+            return;
+        }
+        
+        setIsExporting(true);
+        
+        const selectedChapters: { chapterId: string; version: number }[] = chapterSelections
+            .filter((selection: ChapterExportSelection): boolean => selection.selected)
+            .map((selection: ChapterExportSelection): { chapterId: string; version: number } => ({
+                chapterId: selection.chapterId,
+                version: selection.version,
+            }));
+        
+        try {
+            const response: Response = await fetch(`${configs.apiUrl}book/export`, {
+                method: 'POST',
+                headers: {
+                    Authorization: `Bearer ${session.accessToken}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    bookId: book.bookId,
+                    format: selectedFormat,
+                    chapters: selectedChapters,
+                }),
+            });
+            
+            if (!response.ok) {
+                errorMessage(t('exportOption.downloadError'));
+                return;
+            }
+            
+            const blob: Blob = await response.blob();
+            const bookName: string = book.subTitle ? `${book.title} - ${book.subTitle}` : book.title;
+            const fileName: string = `${bookName}${formatExtensions[selectedFormat]}`;
+            
+            const virtualUrl: string = window.URL.createObjectURL(blob);
+            const downloadLink: HTMLAnchorElement = document.createElement('a');
+            downloadLink.href = virtualUrl;
+            downloadLink.download = fileName;
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            downloadLink.remove();
+            window.URL.revokeObjectURL(virtualUrl);
+            
+            successMessage(t('exportOption.downloadSuccess', {format: selectedFormat.toUpperCase()}));
+        } catch {
+            errorMessage(t('exportOption.unknownError'));
         } finally {
             setIsExporting(false);
         }
     }
-
-    const allSelected: boolean = selections.every((s: ChapterExportSelection): boolean => s.selected);
-    const hasSelection: boolean = selections.some((s: ChapterExportSelection): boolean => s.selected);
-
+    
     return (
-        <div className="space-y-6 p-4">
+        <div className="p-4 space-y-6">
             <div>
-                <h3 className="text-text-primary font-semibold mb-2">{t('exportOption.format')}</h3>
+                <h3 className="text-sm font-semibold text-text-primary mb-3">
+                    {t('exportOption.formatLabel')}
+                </h3>
                 <div className="flex gap-3">
-                    {exportFormats.map(({value, label}) => (
-                        <button
-                            key={value}
-                            type="button"
-                            onClick={(): void => setFormat(value)}
-                            className={`px-4 py-2 rounded-lg font-medium transition-all duration-200 ${
-                                format === value
-                                    ? 'bg-primary text-white shadow-md'
-                                    : 'bg-secondary/30 text-text-secondary hover:bg-secondary/50'
-                            }`}
+                    {formats.map((format: ExportFormat) => (
+                        <Button
+                            key={format}
+                            variant={selectedFormat === format ? 'primary' : 'secondary'}
+                            size="sm"
+                            onClick={(): void => setSelectedFormat(format)}
                         >
-                            {label}
-                        </button>
+                            {format.toUpperCase()}
+                        </Button>
                     ))}
                 </div>
             </div>
-
+            
             <div>
-                <div className="flex items-center justify-between mb-3">
-                    <h3 className="text-text-primary font-semibold">{t('exportOption.chapters')}</h3>
-                    {chapters.length > 0 && (
-                        <button
-                            type="button"
-                            onClick={(): void => toggleAll(!allSelected)}
-                            className="text-sm text-primary hover:text-primary/80 transition-colors"
-                        >
-                            {allSelected ? t('exportOption.deselectAll') : t('exportOption.selectAll')}
-                        </button>
-                    )}
-                </div>
-
-                {isLoading ? (
-                    <div className="flex items-center justify-center py-8">
-                        <FontAwesomeIcon icon={faSpinner} className="w-6 h-6 text-primary animate-spin mr-2"/>
-                        <span className="text-text-secondary">{t('exportOption.loadingChapters')}</span>
-                    </div>
-                ) : chapters.length === 0 ? (
-                    <p className="text-text-secondary text-center py-8">{t('exportOption.noChapters')}</p>
+                <h3 className="text-sm font-semibold text-text-primary mb-3">
+                    {t('exportOption.chapters')}
+                </h3>
+                
+                {isLoadingChapters ? (
+                    <PulseLoader text={t('exportOption.loadingChapters')} size="sm"/>
+                ) : chaptersExportInfo.length === 0 ? (
+                    <p className="text-text-secondary text-sm text-center py-8">
+                        {t('exportOption.noChaptersAvailable')}
+                    </p>
                 ) : (
-                    <div className="space-y-2 max-h-96 overflow-y-auto pr-1">
-                        {chapters.map((chapter: ChapterExportInfo) => {
-                            const selection: ChapterExportSelection | undefined = selections.find(
-                                (s: ChapterExportSelection): boolean => s.chapterId === chapter.chapterId
-                            );
-                            if (!selection) return null;
+                    <>
+                        <div className="mb-3">
+                            <Button variant="ghost" size="sm" onClick={toggleAllChapters}>
+                                {allSelected ? t('exportOption.deselectAll') : t('exportOption.selectAll')}
+                            </Button>
+                        </div>
 
-                            return (
-                                <div
-                                    key={chapter.chapterId}
-                                    className={`flex items-center justify-between p-3 rounded-lg transition-all duration-200 ${
-                                        selection.selected
-                                            ? 'bg-primary/10 border border-primary/30'
-                                            : 'bg-secondary/20 border border-transparent'
-                                    }`}
-                                >
-                                    <label className="flex items-center gap-3 cursor-pointer flex-1">
-                                        <input
-                                            type="checkbox"
-                                            checked={selection.selected}
-                                            onChange={(): void => toggleChapter(chapter.chapterId)}
-                                            className="w-4 h-4 rounded accent-primary cursor-pointer"
-                                        />
-                                        <span className={`text-sm ${
-                                            selection.selected ? 'text-text-primary' : 'text-text-secondary'
-                                        }`}>
-                                            {chapter.title}
-                                        </span>
-                                    </label>
-
-                                    {chapter.availableVersions.length > 1 && selection.selected && (
-                                        <select
-                                            value={selection.version}
-                                            onChange={(e: React.ChangeEvent<HTMLSelectElement>): void =>
-                                                updateVersion(chapter.chapterId, parseInt(e.target.value, 10))
-                                            }
-                                            className="text-xs bg-secondary/50 text-text-primary rounded-md px-2 py-1 border border-secondary/30 focus:outline-none focus:border-primary"
+                        <div className="space-y-1">
+                            {chaptersExportInfo.map((chapter: ChapterExportInfo, index: number) => {
+                                const selection: ChapterExportSelection = chapterSelections[index];
+                                return (
+                                    <div key={chapter.chapterId} className="border-b border-secondary pb-2">
+                                        <button
+                                            onClick={(): void => toggleChapterSelection(chapter.chapterId)}
+                                            className="flex items-center gap-3 w-full py-2 text-left hover:bg-tertiary rounded-lg px-2 transition-all"
                                         >
-                                            {chapter.availableVersions.map((v: number) => (
-                                                <option key={v} value={v}>
-                                                    {getVersionLabel(v)}
-                                                </option>
-                                            ))}
-                                        </select>
-                                    )}
-                                </div>
-                            );
-                        })}
-                    </div>
+                                            <div
+                                                className={`w-5 h-5 rounded flex items-center justify-center border transition-colors ${
+                                                selection.selected
+                                                    ? 'bg-primary/20 border-primary'
+                                                    : 'border-secondary bg-tertiary'
+                                            }`}>
+                                                {selection.selected && (
+                                                    <Check className="w-3 h-3 text-text-primary" strokeWidth={1.75}/>
+                                                )}
+                                            </div>
+                                            <span className={`text-sm font-medium truncate ${
+                                                selection.selected ? 'text-text-primary' : 'text-text-secondary'
+                                            }`}>
+                                                {chapter.chapterOrder !== -1 ? `${chapter.chapterOrder}. ` : ''}
+                                                {chapter.title}
+                                            </span>
+                                        </button>
+                                        
+                                        {selection.selected && chapter.availableVersions.length > 1 && (
+                                            <div className="flex flex-wrap gap-2 ml-10 mt-1 mb-1">
+                                                {chapter.availableVersions.map((version: number) => (
+                                                    <button
+                                                        key={version}
+                                                        onClick={(): void => setChapterVersion(chapter.chapterId, version)}
+                                                        className={`px-3 py-1 rounded-full text-xs font-medium transition-all border ${
+                                                            selection.version === version
+                                                                ? 'bg-primary/20 text-primary border-primary/50'
+                                                                : 'bg-tertiary text-text-secondary border-secondary hover:bg-secondary'
+                                                        }`}
+                                                    >
+                                                        {getVersionLabel(version)}
+                                                    </button>
+                                                ))}
+                                            </div>
+                                        )}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </>
                 )}
             </div>
-
-            <button
-                type="button"
-                onClick={handleExport}
-                disabled={isExporting || !hasSelection || isLoading}
-                className="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 disabled:bg-primary/50 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg disabled:cursor-not-allowed"
-            >
-                {isExporting ? (
-                    <>
-                        <FontAwesomeIcon icon={faSpinner} className="w-4 h-4 animate-spin"/>
-                        {t('exportOption.exporting')}
-                    </>
-                ) : (
-                    <>
-                        <FontAwesomeIcon icon={faDownload} className="w-4 h-4"/>
-                        {t('exportOption.export')}
-                    </>
-                )}
-            </button>
+            
+            <Button variant="primary" size="lg" onClick={handleExport} disabled={!canExport}
+                    isLoading={isExporting} loadingText={t('exportOption.exporting')}
+                    fullWidth>
+                {t('exportOption.exportButton')} {selectedFormat.toUpperCase()}
+                {selectedCount > 0 ? ` (${selectedCount})` : ''}
+            </Button>
         </div>
     );
 }
diff --git a/components/book/settings/ToolDetailHeader.tsx b/components/book/settings/ToolDetailHeader.tsx
index 7a3fcd3..6c5ee6e 100644
--- a/components/book/settings/ToolDetailHeader.tsx
+++ b/components/book/settings/ToolDetailHeader.tsx
@@ -1,16 +1,18 @@
 'use client';
 import React from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faArrowLeft, faEdit, faPlus, faSave, faShare, faTrash, faTimes} from '@fortawesome/free-solid-svg-icons';
-import {IconDefinition} from '@fortawesome/fontawesome-svg-core';
-import {useTranslations} from 'next-intl';
-import {ViewMode} from '@/shared/interface';
+import {ArrowLeft, LucideIcon, Pencil, Plus, Save, Share2, Trash2, X} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import {ViewMode} from '@/lib/types/settings';
+import Button from '@/components/ui/Button';
+import IconButton from '@/components/ui/IconButton';
+
+type ActionVariant = 'primary' | 'danger' | 'ghost';
 
 interface ActionButton {
-    icon: IconDefinition;
+    icon: LucideIcon;
     onClick: () => void;
     title?: string;
-    variant?: 'primary' | 'danger' | 'secondary' | 'blue';
+    variant?: ActionVariant;
 }
 
 interface SidebarHeaderProps {
@@ -36,82 +38,53 @@ interface SidebarHeaderProps {
  * - edit: Boutons Cancel, Save/Create
  */
 export default function ToolDetailHeader({
-    title,
-    defaultTitle,
-    viewMode,
-    isNew,
-    onBack,
-    onEdit,
-    onSave,
-    onCancel,
-    onDelete,
-    onExport,
-    showExport = false,
-    showDelete = true,
-}: SidebarHeaderProps): React.JSX.Element | null {
+                                             title,
+                                             defaultTitle,
+                                             viewMode,
+                                             isNew,
+                                             onBack,
+                                             onEdit,
+                                             onSave,
+                                             onCancel,
+                                             onDelete,
+                                             onExport,
+                                             showExport = false,
+                                             showDelete = true,
+                                         }: SidebarHeaderProps): React.JSX.Element | null {
     const t = useTranslations();
     
     if (viewMode === 'list') {
         return null;
     }
-
-    function getVariantClasses(variant: 'primary' | 'danger' | 'secondary' | 'blue'): string {
-        switch (variant) {
-            case 'primary':
-                return 'bg-primary/10 hover:bg-primary/20 border-primary/30';
-            case 'danger':
-                return 'bg-error/10 hover:bg-error/20 border-error/30';
-            case 'blue':
-                return 'bg-blue-500/10 hover:bg-blue-500/20 border-blue-500/30';
-            case 'secondary':
-            default:
-                return 'bg-secondary/50 hover:bg-secondary border-secondary/50 hover:border-secondary';
-        }
-    }
-
-    function getIconColorClass(variant: 'primary' | 'danger' | 'secondary' | 'blue'): string {
-        switch (variant) {
-            case 'primary':
-                return 'text-primary';
-            case 'danger':
-                return 'text-error';
-            case 'blue':
-                return 'text-blue-500';
-            case 'secondary':
-            default:
-                return 'text-text-primary';
-        }
-    }
-
+    
     function renderActionButton(button: ActionButton, index: number): React.JSX.Element {
-        const variant = button.variant || 'secondary';
         return (
-            <button
+            <IconButton
                 key={`action-${index}`}
+                icon={button.icon}
+                variant={button.variant || 'ghost'}
+                shape="square"
                 onClick={button.onClick}
-                title={button.title}
-                className={`group flex items-center justify-center w-10 h-10 rounded-lg border hover:shadow-md hover:scale-110 transition-all duration-200 ${getVariantClasses(variant)}`}
-            >
-                <FontAwesomeIcon icon={button.icon} className={`w-4 h-4 transition-transform group-hover:scale-110 ${getIconColorClass(variant)}`}/>
-            </button>
+                tooltip={button.title}
+            />
         );
     }
-
+    
     function getActionButtons(): ActionButton[] {
         const buttons: ActionButton[] = [];
-
+        
         if (viewMode === 'detail') {
             if (showExport && onExport) {
                 buttons.push({
-                    icon: faShare,
+                    icon: Share2,
                     onClick: onExport,
                     title: t('common.exportToSeries'),
-                    variant: 'blue',
+                    variant: 'primary',
                 });
             }
             if (showDelete && onDelete) {
                 buttons.push({
-                    icon: faTrash,
+                    icon: Trash2,
                     onClick: onDelete,
                     title: t('common.delete'),
                     variant: 'danger',
@@ -119,7 +92,7 @@ export default function ToolDetailHeader({
             }
             if (onEdit) {
                 buttons.push({
-                    icon: faEdit,
+                    icon: Pencil,
                     onClick: onEdit,
                     title: t('common.edit'),
                     variant: 'primary',
@@ -128,7 +101,7 @@ export default function ToolDetailHeader({
         } else if (viewMode === 'edit') {
             if (onCancel) {
                 buttons.push({
-                    icon: faTimes,
+                    icon: X,
                     onClick: onCancel,
                     title: t('common.cancel'),
                     variant: 'danger',
@@ -136,31 +109,28 @@ export default function ToolDetailHeader({
             }
             if (onSave) {
                 buttons.push({
-                    icon: isNew ? faPlus : faSave,
+                    icon: isNew ? Plus : Save,
                     onClick: onSave,
                     title: isNew ? t('common.create') : t('common.save'),
                     variant: 'primary',
                 });
             }
         }
-
+        
         return buttons;
     }
-
+    
     return (
-        <div className="flex justify-between items-center p-4 border-b border-secondary/50 bg-tertiary/50 backdrop-blur-sm">
-            <button
-                onClick={onBack}
-                className="flex items-center gap-2 bg-secondary/50 py-2 px-4 rounded-xl border border-secondary/50 hover:bg-secondary hover:border-secondary hover:shadow-md hover:scale-105 transition-all duration-200"
-            >
-                <FontAwesomeIcon icon={faArrowLeft} className="text-primary w-4 h-4"/>
-                <span className="text-text-primary font-medium">{t('common.back')}</span>
-            </button>
-
+        <div
+            className="flex justify-between items-center p-4 border-b border-secondary bg-darkest-background">
+            <Button variant="secondary" size="sm" icon={ArrowLeft} onClick={onBack}>
+                {t('common.back')}
+            </Button>
+            
             <span className="text-text-primary font-semibold text-lg">
                 {title || defaultTitle}
             </span>
-
+            
             <div className="flex items-center gap-2">
                 {getActionButtons().map(renderActionButton)}
             </div>
diff --git a/components/book/settings/characters/CharacterSectionElement.tsx b/components/book/settings/characters/CharacterSectionElement.tsx
index 202355c..21e963a 100644
--- a/components/book/settings/characters/CharacterSectionElement.tsx
+++ b/components/book/settings/characters/CharacterSectionElement.tsx
@@ -1,23 +1,23 @@
-import CollapsableArea from "@/components/CollapsableArea";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {useState} from "react";
-import {faTrash} from "@fortawesome/free-solid-svg-icons";
+import Collapse from "@/components/ui/Collapse";
+import React, {ChangeEvent, useState} from "react";
+import {LucideIcon, Trash2} from 'lucide-react';
+import IconButton from "@/components/ui/IconButton";
 import InputField from "@/components/form/InputField";
 import TextInput from "@/components/form/TextInput";
-import {Attribute, CharacterProps} from "@/lib/models/Character";
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
-import {useTranslations} from "next-intl";
+import {Attribute, CharacterAttributeSection, CharacterProps} from "@/lib/types/character";
+import {useTranslations} from '@/lib/i18n';
+
 
 interface CharacterSectionElementProps {
     title: string;
-    section: keyof CharacterProps;
+    section: CharacterAttributeSection;
     placeholder: string;
-    icon: IconDefinition;
+    icon: LucideIcon;
     selectedCharacter: CharacterProps;
     setSelectedCharacter: (character: CharacterProps) => void;
-    handleAddElement: (section: keyof CharacterProps, element: Attribute) => void;
+    handleAddElement: (section: CharacterAttributeSection, element: Attribute) => void;
     handleRemoveElement: (
-        section: keyof CharacterProps,
+        section: CharacterAttributeSection,
         index: number,
         attrId: string,
     ) => void;
@@ -33,28 +33,26 @@ export default function CharacterSectionElement(
         setSelectedCharacter,
         handleAddElement,
         handleRemoveElement,
-    }: CharacterSectionElementProps) {
+    }: CharacterSectionElementProps): React.JSX.Element {
     const t = useTranslations();
     const [element, setElement] = useState<string>('');
     
-    function handleAddNewElement() {
+    function handleAddNewElement(): void {
         handleAddElement(section, {id: '', name: element});
         setElement('');
     }
-    
+
     return (
-        <CollapsableArea title={title} icon={icon}>
-            <div className="space-y-3 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
-                {Array.isArray(selectedCharacter?.[section]) &&
-                    selectedCharacter?.[section].map((item, index: number) => (
+        <Collapse variant="card" title={title} icon={icon}>
+            {selectedCharacter[section].map((item: Attribute, index: number): React.JSX.Element => (
                         <div key={index}
-                             className="flex items-center gap-2 bg-secondary/30 rounded-xl border-l-4 border-primary shadow-sm hover:shadow-md transition-all duration-200">
+                             className="flex items-center gap-2 bg-secondary rounded-xl border-l-4 border-primary transition-colors duration-200">
                             <input
                                 className="flex-1 bg-transparent text-text-primary px-3 py-2.5 focus:outline-none placeholder:text-muted/60"
-                                value={item.name || item.type || item.description || item.history || ''}
-                                onChange={(e) => {
-                                    const updatedSection = [...(selectedCharacter[section] as any[])];
-                                    updatedSection[index].name = e.target.value;
+                                value={item.name || ''}
+                                onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+                                    const updatedSection: Attribute[] = [...selectedCharacter[section]];
+                                    updatedSection[index] = {...updatedSection[index], name: e.target.value};
                                     setSelectedCharacter({
                                         ...selectedCharacter,
                                         [section]: updatedSection,
@@ -62,28 +60,28 @@ export default function CharacterSectionElement(
                                 }}
                                 placeholder={placeholder}
                             />
-                            <button
-                                onClick={() => handleRemoveElement(section, index, item.id)}
-                                className="bg-error/90 hover:bg-error w-9 h-9 rounded-full flex items-center justify-center mr-2 shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200"
-                            >
-                                <FontAwesomeIcon icon={faTrash} className="text-white w-4 h-4"/>
-                            </button>
+                            <div className="mr-2">
+                                <IconButton
+                                    icon={Trash2}
+                                    variant="danger"
+                                    onClick={(): void => handleRemoveElement(section, index, item.id)}
+                                />
+                            </div>
                         </div>
                     ))}
-                
-                <div className="border-t border-secondary/50 mt-4 pt-4">
+
+                <div className="border-t border-secondary mt-4 pt-4">
                     <InputField
                         input={
                             <TextInput
                                 value={element}
-                                setValue={(e) => setElement(e.target.value)}
+                                setValue={(e: ChangeEvent<HTMLInputElement>): void => setElement(e.target.value)}
                                 placeholder={t("characterSectionElement.newItem", {item: title.toLowerCase()})}
                             />
                         }
-                        addButtonCallBack={async () => handleAddNewElement()}
+                        addButtonCallBack={async (): Promise<void> => handleAddNewElement()}
                     />
                 </div>
-            </div>
-        </CollapsableArea>
+        </Collapse>
     )
 }
\ No newline at end of file
diff --git a/components/book/settings/characters/editor/CharacterEditor.tsx b/components/book/settings/characters/editor/CharacterEditor.tsx
index 97b453f..ff5d2f5 100644
--- a/components/book/settings/characters/editor/CharacterEditor.tsx
+++ b/components/book/settings/characters/editor/CharacterEditor.tsx
@@ -1,18 +1,15 @@
 'use client';
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 import {useCharacters, UseCharactersConfig} from '@/hooks/settings/useCharacters';
-import {useTranslations} from 'next-intl';
-import {CharacterProps} from '@/lib/models/Character';
-import {SeriesCharacterProps} from '@/lib/models/Series';
-import {BookContext} from '@/context/BookContext';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
+import {useTranslations} from '@/lib/i18n';
+import {CharacterProps} from '@/lib/types/character';
+import {SeriesCharacterProps} from '@/lib/types/series';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import PulseLoader from '@/components/ui/PulseLoader';
 
 import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
-import InputField from '@/components/form/InputField';
-import ToggleSwitch from '@/components/form/ToggleSwitch';
 import SeriesImportSelector from '@/components/form/SeriesImportSelector';
-import AlertBox from '@/components/AlertBox';
+import AlertBox from '@/components/ui/AlertBox';
 
 import CharacterEditorList from './CharacterEditorList';
 import CharacterEditorDetail from './CharacterEditorDetail';
@@ -24,16 +21,16 @@ import CharacterEditorEdit from './CharacterEditorEdit';
  */
 export default function CharacterEditor(): React.JSX.Element {
     const t = useTranslations();
-    const {book} = useContext(BookContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
     const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
-
+    
     const config: UseCharactersConfig = useMemo(function (): UseCharactersConfig {
         return {
             entityType: 'book',
             entityId: book?.bookId || '',
         };
     }, [book?.bookId]);
-
+    
     const {
         characters,
         seriesCharacters,
@@ -58,7 +55,7 @@ export default function CharacterEditor(): React.JSX.Element {
         backToList,
         addNewCharacter,
     } = useCharacters(config);
-
+    
     const availableSeriesCharacters = useMemo(function (): SeriesCharacterProps[] {
         return seriesCharacters.filter(function (sc: SeriesCharacterProps): boolean {
             return !characters.some(function (c: CharacterProps): boolean {
@@ -66,19 +63,19 @@ export default function CharacterEditor(): React.JSX.Element {
             });
         });
     }, [seriesCharacters, characters]);
-
+    
     const handleCharacterChange = useCallback(function (key: keyof CharacterProps, value: string | number | null): void {
         updateCharacterField(key, value);
     }, [updateCharacterField]);
-
+    
     async function handleSave(): Promise<void> {
         await exitEditMode(true);
     }
-
+    
     function handleCancel(): void {
         exitEditMode(false);
     }
-
+    
     async function handleDelete(): Promise<void> {
         if (selectedCharacter?.id) {
             await deleteCharacter(selectedCharacter.id);
@@ -86,25 +83,21 @@ export default function CharacterEditor(): React.JSX.Element {
             backToList();
         }
     }
-
+    
     function getSeriesCharacterForSelected(): SeriesCharacterProps | null {
         if (!selectedCharacter?.seriesCharacterId) return null;
         return seriesCharacters.find(function (sc: SeriesCharacterProps): boolean {
             return sc.id === selectedCharacter.seriesCharacterId;
         }) || null;
     }
-
+    
     if (isLoading) {
-        return (
-            <div className="flex items-center justify-center py-8">
-                <FontAwesomeIcon icon={faSpinner} className="w-6 h-6 text-primary animate-spin"/>
-            </div>
-        );
+        return <PulseLoader size="sm"/>;
     }
-
+    
     const isNew: boolean = selectedCharacter?.id === null;
     const canExport: boolean = Boolean(bookSeriesId && selectedCharacter?.id && !selectedCharacter.seriesCharacterId);
-
+    
     return (
         <div className="flex flex-col h-full">
             <ToolDetailHeader
@@ -116,56 +109,40 @@ export default function CharacterEditor(): React.JSX.Element {
                 onEdit={enterEditMode}
                 onSave={handleSave}
                 onCancel={handleCancel}
-                onDelete={function (): void { setShowDeleteConfirm(true); }}
+                onDelete={function (): void {
+                    setShowDeleteConfirm(true);
+                }}
                 onExport={canExport ? exportToSeries : undefined}
                 showExport={canExport}
                 showDelete={Boolean(selectedCharacter?.id)}
             />
-
+            
             <div className="flex-1 overflow-y-auto">
                 {viewMode === 'list' && (
                     <div className="space-y-3 p-2">
-                        {/* Toggle tool */}
-                        <div className="bg-secondary/20 rounded-lg p-3 border border-secondary/30">
-                            <InputField
-                                icon={faToggleOn}
-                                fieldName={t('characterComponent.enableTool')}
-                                input={
-                                    <ToggleSwitch
-                                        checked={toolEnabled}
-                                        onChange={toggleTool}
-                                    />
-                                }
+                        {/* Import from series */}
+                        {bookSeriesId && availableSeriesCharacters.length > 0 && (
+                            <SeriesImportSelector
+                                availableItems={availableSeriesCharacters.map(function (sc: SeriesCharacterProps) {
+                                    return {
+                                        id: sc.id,
+                                        name: `${sc.name}${sc.lastName ? ' ' + sc.lastName : ''}`
+                                    };
+                                })}
+                                onImport={importFromSeries}
+                                placeholder={t('seriesImport.selectElement')}
+                                label={t('seriesImport.importFromSeries')}
                             />
-                        </div>
-
-                        {toolEnabled && (
-                            <>
-                                {/* Import from series */}
-                                {bookSeriesId && availableSeriesCharacters.length > 0 && (
-                                    <SeriesImportSelector
-                                        availableItems={availableSeriesCharacters.map(function (sc: SeriesCharacterProps) {
-                                            return {
-                                                id: sc.id,
-                                                name: `${sc.name}${sc.lastName ? ' ' + sc.lastName : ''}`
-                                            };
-                                        })}
-                                        onImport={importFromSeries}
-                                        placeholder={t('seriesImport.selectElement')}
-                                        label={t('seriesImport.importFromSeries')}
-                                    />
-                                )}
-
-                                <CharacterEditorList
-                                    characters={characters}
-                                    onCharacterClick={enterDetailMode}
-                                    onAddCharacter={addNewCharacter}
-                                />
-                            </>
                         )}
+                        
+                        <CharacterEditorList
+                            characters={characters}
+                            onCharacterClick={enterDetailMode}
+                            onAddCharacter={addNewCharacter}
+                        />
                     </div>
                 )}
-
+                
                 {viewMode === 'detail' && selectedCharacter && (
                     <div className="p-4">
                         <CharacterEditorDetail
@@ -174,7 +151,7 @@ export default function CharacterEditor(): React.JSX.Element {
                         />
                     </div>
                 )}
-
+                
                 {viewMode === 'edit' && selectedCharacter && (
                     <div className="p-4">
                         <CharacterEditorEdit
@@ -189,7 +166,7 @@ export default function CharacterEditor(): React.JSX.Element {
                     </div>
                 )}
             </div>
-
+            
             {showDeleteConfirm && selectedCharacter?.id && (
                 <AlertBox
                     title={t('characterDetail.deleteTitle')}
@@ -198,7 +175,9 @@ export default function CharacterEditor(): React.JSX.Element {
                     confirmText={t('common.delete')}
                     cancelText={t('common.cancel')}
                     onConfirm={handleDelete}
-                    onCancel={function (): void { setShowDeleteConfirm(false); }}
+                    onCancel={function (): void {
+                        setShowDeleteConfirm(false);
+                    }}
                 />
             )}
         </div>
diff --git a/components/book/settings/characters/editor/CharacterEditorDetail.tsx b/components/book/settings/characters/editor/CharacterEditorDetail.tsx
index 9fb6681..20708b4 100644
--- a/components/book/settings/characters/editor/CharacterEditorDetail.tsx
+++ b/components/book/settings/characters/editor/CharacterEditorDetail.tsx
@@ -1,20 +1,16 @@
 'use client';
 import React, {useContext, useEffect} from 'react';
-import {
-    Attribute,
-    CharacterAttribute,
-    characterCategories,
-    CharacterProps
-} from '@/lib/models/Character';
-import {SeriesCharacterProps} from '@/lib/models/Series';
-import {useTranslations} from 'next-intl';
-import {SessionContext} from '@/context/SessionContext';
-import {AlertContext} from '@/context/AlertContext';
-import {LangContext} from '@/context/LangContext';
-import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
-import {BookContext} from '@/context/BookContext';
-import System from '@/lib/models/System';
-import * as tauri from '@/lib/tauri';
+import {Attribute, CharacterAttribute, CharacterProps} from '@/lib/types/character';
+import {characterCategories} from '@/lib/constants/character';
+import {SelectBoxProps} from '@/components/form/SelectBox';
+import {SeriesCharacterProps} from '@/lib/types/series';
+import {useTranslations} from '@/lib/i18n';
+import DetailField from '@/components/ui/DetailField';
+import AvatarIcon from '@/components/ui/AvatarIcon';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
+import {LangContext, LangContextProps} from '@/context/LangContext';
+import {apiGet} from '@/lib/api/client';
 
 type AttributeResponse = { type: string; values: Attribute[] }[];
 
@@ -30,36 +26,29 @@ interface CharacterEditorDetailProps {
  * PAS de CollapsableArea, PAS de grids
  */
 export default function CharacterEditorDetail({
-    character,
-    seriesCharacter,
-    onLoadAttributes,
-}: CharacterEditorDetailProps): React.JSX.Element {
+                                                  character,
+                                                  seriesCharacter,
+                                                  onLoadAttributes,
+                                              }: CharacterEditorDetailProps): React.JSX.Element {
     const t = useTranslations();
-    const {lang} = useContext(LangContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage} = useContext(AlertContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {book} = useContext(BookContext);
-
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    
     useEffect(function (): void {
         if (character?.id !== null) {
             getAttributes().then();
         }
     }, [character?.id]);
-
+    
     async function getAttributes(): Promise<void> {
         try {
-            let response: AttributeResponse;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getCharacterAttributes(character?.id!) as AttributeResponse;
-            } else {
-                response = await System.authGetQueryToServer<AttributeResponse>(
-                    'character/attribute',
-                    session.accessToken,
-                    lang,
-                    {characterId: character?.id}
-                );
-            }
+            const response: AttributeResponse = await apiGet<AttributeResponse>(
+                'character/attribute',
+                session.accessToken,
+                lang,
+                {characterId: character?.id}
+            );
             if (response && onLoadAttributes) {
                 const attributes: CharacterAttribute = {};
                 response.forEach(function (item: { type: string; values: Attribute[] }): void {
@@ -73,48 +62,34 @@ export default function CharacterEditorDetail({
             }
         }
     }
-
-    function renderField(label: string, value: string | number | null | undefined): React.JSX.Element | null {
-        if (!value) return null;
-        return (
-            <div className="mb-3">
-                <span className="text-text-secondary text-xs block mb-1">{label}</span>
-                <p className="text-text-primary text-sm">{value}</p>
-            </div>
-        );
-    }
-
+    
     function getCategoryLabel(category: string | null | undefined): string {
         if (!category) return '';
-        const found = characterCategories.find(function (c): boolean { return c.value === category; });
+        const found: SelectBoxProps | undefined = characterCategories.find(function (c: SelectBoxProps): boolean {
+            return c.value === category;
+        });
         return found ? t(found.label) : category;
     }
-
+    
     return (
         <div>
-            {/* Image du personnage - version compacte */}
             {character.image && (
                 <div className="flex justify-center mb-4">
-                    <div className="w-16 h-16 rounded-full border-2 border-primary overflow-hidden">
-                        <img
-                            src={character.image}
-                            alt={character.name}
-                            className="w-full h-full object-cover"
-                        />
-                    </div>
+                    <AvatarIcon size="xl" image={character.image} alt={character.name}/>
                 </div>
             )}
-
+            
             <h3 className="text-text-primary font-semibold text-base mb-4">
                 {character.name} {character.lastName}
             </h3>
-
-            {renderField(t('characterDetail.role'), getCategoryLabel(character.category))}
-            {renderField(t('characterDetail.title'), character.title)}
-            {renderField(t('characterDetail.gender'), character.gender)}
-            {renderField(t('characterDetail.age'), character.age)}
-            {renderField(t('characterDetail.biography'), character.biography)}
-            {renderField(t('characterDetail.roleFull'), character.role)}
+            
+            <DetailField variant="compact" label={t('characterDetail.role')}
+                         value={getCategoryLabel(character.category)}/>
+            <DetailField variant="compact" label={t('characterDetail.title')} value={character.title}/>
+            <DetailField variant="compact" label={t('characterDetail.gender')} value={character.gender}/>
+            <DetailField variant="compact" label={t('characterDetail.age')} value={character.age}/>
+            <DetailField variant="compact" label={t('characterDetail.biography')} value={character.biography}/>
+            <DetailField variant="compact" label={t('characterDetail.roleFull')} value={character.role}/>
         </div>
     );
 }
diff --git a/components/book/settings/characters/editor/CharacterEditorEdit.tsx b/components/book/settings/characters/editor/CharacterEditorEdit.tsx
index b9a6978..647922d 100644
--- a/components/book/settings/characters/editor/CharacterEditorEdit.tsx
+++ b/components/book/settings/characters/editor/CharacterEditorEdit.tsx
@@ -1,34 +1,34 @@
 'use client';
-import React, {useContext, useEffect, useMemo, useState} from 'react';
+import React, {Dispatch, SetStateAction, useContext, useEffect, useState} from 'react';
 import {
-    advancedCharacterElements,
     Attribute,
-    basicCharacterElements,
     CharacterAttribute,
-    characterCategories,
+    CharacterAttributeSection,
     CharacterElement,
     CharacterProps,
+    isCharacterCategory,
+    isCharacterStatus,
+} from '@/lib/types/character';
+import {
+    advancedCharacterElements,
+    basicCharacterElements,
+    characterCategories,
     characterStatus
-} from '@/lib/models/Character';
-import {SeriesCharacterProps} from '@/lib/models/Series';
+} from '@/lib/constants/character';
+import {SeriesCharacterProps} from '@/lib/types/series';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import TexteAreaInput from '@/components/form/TexteAreaInput';
+import TextAreaInput from '@/components/form/TextAreaInput';
 import NumberInput from '@/components/form/NumberInput';
 import SelectBox from '@/components/form/SelectBox';
 import CharacterSectionElement from '@/components/book/settings/characters/CharacterSectionElement';
 import SyncFieldWrapper from '@/components/form/SyncFieldWrapper';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSliders} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
-import {SessionContext} from '@/context/SessionContext';
-import {AlertContext} from '@/context/AlertContext';
-import {LangContext} from '@/context/LangContext';
-import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
-import {BookContext} from '@/context/BookContext';
-import System from '@/lib/models/System';
-import {Dispatch, SetStateAction} from 'react';
-import * as tauri from '@/lib/tauri';
+import {SlidersHorizontal} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
+import {LangContext, LangContextProps} from '@/context/LangContext';
+import {apiGet} from '@/lib/api/client';
 
 type AttributeResponse = { type: string; values: Attribute[] }[];
 
@@ -36,8 +36,8 @@ interface CharacterEditorEditProps {
     character: CharacterProps;
     setCharacter: Dispatch<SetStateAction<CharacterProps | null>>;
     onCharacterChange: (key: keyof CharacterProps, value: string | number | null) => void;
-    onAddAttribute: (section: keyof CharacterProps, attr: Attribute) => Promise<void>;
-    onRemoveAttribute: (section: keyof CharacterProps, idx: number, id: string) => Promise<void>;
+    onAddAttribute: (section: CharacterAttributeSection, attr: Attribute) => Promise<void>;
+    onRemoveAttribute: (section: CharacterAttributeSection, idx: number, id: string) => Promise<void>;
     seriesCharacter?: SeriesCharacterProps | null;
     onSyncComplete?: () => void;
 }
@@ -47,54 +47,34 @@ interface CharacterEditorEditProps {
  * Mêmes fonctionnalités que CharacterSettingsEdit, layout linéaire
  */
 export default function CharacterEditorEdit({
-    character,
-    setCharacter,
-    onCharacterChange,
-    onAddAttribute,
-    onRemoveAttribute,
-    seriesCharacter,
-    onSyncComplete,
-}: CharacterEditorEditProps): React.JSX.Element {
+                                                character,
+                                                setCharacter,
+                                                onCharacterChange,
+                                                onAddAttribute,
+                                                onRemoveAttribute,
+                                                seriesCharacter,
+                                                onSyncComplete,
+                                            }: CharacterEditorEditProps): React.JSX.Element {
     const t = useTranslations();
-    const {lang} = useContext(LangContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage} = useContext(AlertContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {book} = useContext(BookContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
     const [showAdvanced, setShowAdvanced] = useState<boolean>(false);
-
-    // Traduire les données des SelectBox
-    const translatedCharacterCategories = useMemo(() =>
-        characterCategories.map((item) => ({
-            ...item,
-            label: t(item.label)
-        })), [t]);
-
-    const translatedCharacterStatus = useMemo(() =>
-        characterStatus.map((item) => ({
-            ...item,
-            label: t(item.label)
-        })), [t]);
-
+    
     useEffect(function (): void {
         if (character?.id !== null) {
             getAttributes().then();
         }
     }, [character?.id]);
-
+    
     async function getAttributes(): Promise<void> {
         try {
-            let response: AttributeResponse;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getCharacterAttributes(character?.id!) as AttributeResponse;
-            } else {
-                response = await System.authGetQueryToServer<AttributeResponse>(
-                    'character/attribute',
-                    session.accessToken,
-                    lang,
-                    {characterId: character?.id}
-                );
-            }
+            const response: AttributeResponse = await apiGet<AttributeResponse>(
+                'character/attribute',
+                session.accessToken,
+                lang,
+                {characterId: character?.id}
+            );
             if (response) {
                 const attributes: CharacterAttribute = {};
                 response.forEach(function (item: { type: string; values: Attribute[] }): void {
@@ -131,11 +111,11 @@ export default function CharacterEditorEdit({
             }
         }
     }
-
+    
     return (
         <div className="space-y-4">
             {/* Informations de base */}
-            <div className="border-b border-secondary/30 pb-3">
+            <div className="border-b border-secondary pb-3">
                 <h4 className="text-text-primary font-medium text-sm mb-3">{t('characterDetail.basicInfo')}</h4>
                 <div className="space-y-3">
                     <InputField
@@ -148,7 +128,9 @@ export default function CharacterEditorEdit({
                                 bookElementId={character.id || ''}
                                 field="name"
                                 elementType="character"
-                                onDownload={function (): void { onCharacterChange('name', seriesCharacter?.name || ''); }}
+                                onDownload={function (): void {
+                                    onCharacterChange('name', seriesCharacter?.name || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
                                 <TextInput
@@ -161,7 +143,7 @@ export default function CharacterEditorEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.lastName')}
                         input={
@@ -172,7 +154,9 @@ export default function CharacterEditorEdit({
                                 bookElementId={character.id || ''}
                                 field="lastName"
                                 elementType="character"
-                                onDownload={function (): void { onCharacterChange('lastName', seriesCharacter?.lastName || ''); }}
+                                onDownload={function (): void {
+                                    onCharacterChange('lastName', seriesCharacter?.lastName || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
                                 <TextInput
@@ -185,22 +169,27 @@ export default function CharacterEditorEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.role')}
                         input={
                             <SelectBox
                                 defaultValue={character.category || 'none'}
                                 onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
+                                    const selectedCategory: string = e.target.value;
                                     setCharacter(function (prev: CharacterProps | null): CharacterProps | null {
-                                        return prev ? {...prev, category: e.target.value as CharacterProps['category']} : prev;
+                                        return prev ? {
+                                            ...prev,
+                                            category: isCharacterCategory(selectedCategory) ? selectedCategory : 'none'
+                                        } : prev;
                                     });
                                 }}
-                                data={translatedCharacterCategories}
+                                data={characterCategories}
+                                translate
                             />
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.gender')}
                         input={
@@ -213,7 +202,7 @@ export default function CharacterEditorEdit({
                             />
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.age')}
                         input={
@@ -230,9 +219,9 @@ export default function CharacterEditorEdit({
                     />
                 </div>
             </div>
-
+            
             {/* Histoire */}
-            <div className="border-b border-secondary/30 pb-3">
+            <div className="border-b border-secondary pb-3">
                 <h4 className="text-text-primary font-medium text-sm mb-3">{t('characterDetail.historySection')}</h4>
                 <div className="space-y-3">
                     <InputField
@@ -245,10 +234,12 @@ export default function CharacterEditorEdit({
                                 bookElementId={character.id || ''}
                                 field="biography"
                                 elementType="character"
-                                onDownload={function (): void { onCharacterChange('biography', seriesCharacter?.biography || ''); }}
+                                onDownload={function (): void {
+                                    onCharacterChange('biography', seriesCharacter?.biography || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
-                                <TexteAreaInput
+                                <TextAreaInput
                                     value={character.biography || ''}
                                     setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                         onCharacterChange('biography', e.target.value);
@@ -258,7 +249,7 @@ export default function CharacterEditorEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.roleFull')}
                         input={
@@ -269,10 +260,12 @@ export default function CharacterEditorEdit({
                                 bookElementId={character.id || ''}
                                 field="role"
                                 elementType="character"
-                                onDownload={function (): void { onCharacterChange('role', seriesCharacter?.role || ''); }}
+                                onDownload={function (): void {
+                                    onCharacterChange('role', seriesCharacter?.role || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
-                                <TexteAreaInput
+                                <TextAreaInput
                                     value={character.role || ''}
                                     setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                         onCharacterChange('role', e.target.value);
@@ -284,7 +277,7 @@ export default function CharacterEditorEdit({
                     />
                 </div>
             </div>
-
+            
             {/* Attributs de base */}
             {basicCharacterElements.map(function (item: CharacterElement, index: number): React.JSX.Element {
                 return (
@@ -301,29 +294,32 @@ export default function CharacterEditorEdit({
                     />
                 );
             })}
-
+            
             {/* Toggle Mode Avancé */}
-            <div className="flex items-center justify-between p-3 bg-secondary/30 rounded-lg border border-secondary/50">
+            <div
+                className="flex items-center justify-between p-3 bg-secondary rounded-lg border border-secondary">
                 <div className="flex items-center gap-2">
-                    <FontAwesomeIcon icon={faSliders} className="text-primary w-4 h-4"/>
+                    <SlidersHorizontal className="text-primary w-4 h-4" strokeWidth={1.75}/>
                     <span className="text-text-primary font-medium text-sm">{t('characterDetail.advancedMode')}</span>
                 </div>
                 <button
-                    onClick={function (): void { setShowAdvanced(!showAdvanced); }}
-                    className={`px-3 py-1.5 rounded-lg text-sm transition-all duration-200 ${
+                    onClick={function (): void {
+                        setShowAdvanced(!showAdvanced);
+                    }}
+                    className={`px-3 py-1.5 rounded-lg text-sm transition-colors duration-150 ${
                         showAdvanced
-                            ? 'bg-primary text-white'
-                            : 'bg-secondary/50 text-text-primary hover:bg-secondary'
+                            ? 'bg-secondary text-primary'
+                            : 'bg-secondary text-text-secondary hover:text-text-primary'
                     }`}
                 >
                     {showAdvanced ? t('characterDetail.hideAdvanced') : t('characterDetail.showAdvanced')}
                 </button>
             </div>
-
+            
             {/* Sections avancées */}
             {showAdvanced && (
                 <>
-                    <div className="border-b border-secondary/30 pb-3">
+                    <div className="border-b border-secondary pb-3">
                         <h4 className="text-text-primary font-medium text-sm mb-3">{t('characterDetail.identitySection')}</h4>
                         <div className="space-y-3">
                             <InputField
@@ -338,30 +334,35 @@ export default function CharacterEditorEdit({
                                     />
                                 }
                             />
-
+                            
                             <InputField
                                 fieldName={t('characterDetail.status')}
                                 input={
                                     <SelectBox
                                         defaultValue={character.status || 'alive'}
                                         onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
+                                            const selectedStatus: string = e.target.value;
                                             setCharacter(function (prev: CharacterProps | null): CharacterProps | null {
-                                                return prev ? {...prev, status: e.target.value as CharacterProps['status']} : prev;
+                                                return prev ? {
+                                                    ...prev,
+                                                    status: isCharacterStatus(selectedStatus) ? selectedStatus : 'alive'
+                                                } : prev;
                                             });
                                         }}
-                                        data={translatedCharacterStatus}
+                                        data={characterStatus}
+                                        translate
                                     />
                                 }
                             />
                         </div>
                     </div>
-
-                    <div className="border-b border-secondary/30 pb-3">
+                    
+                    <div className="border-b border-secondary pb-3">
                         <h4 className="text-text-primary font-medium text-sm mb-3">{t('characterDetail.authorSection')}</h4>
                         <InputField
                             fieldName={t('characterDetail.notes')}
                             input={
-                                <TexteAreaInput
+                                <TextAreaInput
                                     value={character.notes || ''}
                                     setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                         onCharacterChange('notes', e.target.value);
@@ -371,7 +372,7 @@ export default function CharacterEditorEdit({
                             }
                         />
                     </div>
-
+                    
                     {advancedCharacterElements.map(function (item: CharacterElement, index: number): React.JSX.Element {
                         return (
                             <CharacterSectionElement
diff --git a/components/book/settings/characters/editor/CharacterEditorList.tsx b/components/book/settings/characters/editor/CharacterEditorList.tsx
index 011344f..19cce3a 100644
--- a/components/book/settings/characters/editor/CharacterEditorList.tsx
+++ b/components/book/settings/characters/editor/CharacterEditorList.tsx
@@ -1,11 +1,13 @@
 'use client';
 import React, {useState} from 'react';
-import {CharacterProps} from '@/lib/models/Character';
+import {CharacterProps} from '@/lib/types/character';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronRight, faPlus, faUser} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {Plus, User} from 'lucide-react';
+import EmptyState from '@/components/ui/EmptyState';
+import EntityListItem from '@/components/ui/EntityListItem';
+import AvatarIcon from '@/components/ui/AvatarIcon';
+import {useTranslations} from '@/lib/i18n';
 
 interface CharacterEditorListProps {
     characters: CharacterProps[];
@@ -19,22 +21,22 @@ interface CharacterEditorListProps {
  * PAS de scroll interne (géré par parent ComposerRightBar)
  */
 export default function CharacterEditorList({
-    characters,
-    onCharacterClick,
-    onAddCharacter,
-}: CharacterEditorListProps): React.JSX.Element {
+                                                characters,
+                                                onCharacterClick,
+                                                onAddCharacter,
+                                            }: CharacterEditorListProps): React.JSX.Element {
     const t = useTranslations();
     const [searchQuery, setSearchQuery] = useState<string>('');
-
+    
     function getFilteredCharacters(): CharacterProps[] {
         return characters.filter(function (char: CharacterProps): boolean {
             return char.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                 (char.lastName?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false);
         });
     }
-
+    
     const filteredCharacters: CharacterProps[] = getFilteredCharacters();
-
+    
     return (
         <div className="space-y-3">
             <div className="px-2">
@@ -48,65 +50,33 @@ export default function CharacterEditorList({
                             placeholder={t('characterList.search')}
                         />
                     }
-                    actionIcon={faPlus}
+                    actionIcon={Plus}
                     actionLabel={t('characterList.add')}
                     addButtonCallBack={async function (): Promise<void> {
                         onAddCharacter();
                     }}
                 />
             </div>
-
+            
             <div className="px-2 space-y-2">
                 {filteredCharacters.length === 0 ? (
-                    <div className="flex flex-col items-center justify-center py-8 text-center">
-                        <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3">
-                            <FontAwesomeIcon icon={faUser} className="text-primary w-8 h-8"/>
-                        </div>
-                        <h3 className="text-text-primary font-semibold text-base mb-1">
-                            {t('characterList.noCharacters')}
-                        </h3>
-                        <p className="text-muted text-sm max-w-xs">
-                            {t('characterList.noCharactersDescription')}
-                        </p>
-                    </div>
+                    <EmptyState icon={User} title={t('characterList.noCharacters')}
+                                description={t('characterList.noCharactersDescription')}/>
                 ) : (
                     filteredCharacters.map(function (char: CharacterProps): React.JSX.Element {
                         return (
-                            <div
+                            <EntityListItem
                                 key={char.id}
-                                onClick={function (): void { onCharacterClick(char); }}
-                                className="group flex items-center p-3 bg-secondary/30 rounded-lg border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md transition-all duration-200 hover:border-primary/50"
-                            >
-                                <div className="w-10 h-10 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-sm group-hover:scale-110 transition-transform">
-                                    {char.image ? (
-                                        <img
-                                            src={char.image}
-                                            alt={char.name}
-                                            className="w-full h-full object-cover"
-                                        />
-                                    ) : (
-                                        <div className="w-full h-full flex items-center justify-center bg-primary/10 text-primary font-bold text-sm">
-                                            {char.name?.charAt(0)?.toUpperCase() || '?'}
-                                        </div>
-                                    )}
-                                </div>
-
-                                <div className="ml-3 flex-1 min-w-0">
-                                    <div className="text-text-primary font-semibold text-sm group-hover:text-primary transition-colors truncate">
-                                        {char.name || t('characterList.unknown')}
-                                    </div>
-                                    <div className="text-muted text-xs truncate">
-                                        {char.title || char.role || t('characterList.noRole')}
-                                    </div>
-                                </div>
-
-                                <div className="w-6 flex justify-center">
-                                    <FontAwesomeIcon
-                                        icon={faChevronRight}
-                                        className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-3 h-3"
-                                    />
-                                </div>
-                            </div>
+                                size="sm"
+                                onClick={function (): void {
+                                    onCharacterClick(char);
+                                }}
+                                avatar={<AvatarIcon size="sm" image={char.image}
+                                                    initial={char.name?.charAt(0)?.toUpperCase() || '?'}
+                                                    alt={char.name}/>}
+                                title={char.name || t('characterList.unknown')}
+                                subtitle={char.title || char.role || t('characterList.noRole')}
+                            />
                         );
                     })
                 )}
diff --git a/components/book/settings/characters/settings/CharacterSettings.tsx b/components/book/settings/characters/settings/CharacterSettings.tsx
index a3884fb..79714ea 100644
--- a/components/book/settings/characters/settings/CharacterSettings.tsx
+++ b/components/book/settings/characters/settings/CharacterSettings.tsx
@@ -1,18 +1,15 @@
 'use client';
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 import {useCharacters, UseCharactersConfig} from '@/hooks/settings/useCharacters';
-import {useTranslations} from 'next-intl';
-import {CharacterProps} from '@/lib/models/Character';
-import {SeriesCharacterProps} from '@/lib/models/Series';
-import {BookContext} from '@/context/BookContext';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
+import {useTranslations} from '@/lib/i18n';
+import {CharacterProps} from '@/lib/types/character';
+import {SeriesCharacterProps} from '@/lib/types/series';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import PulseLoader from '@/components/ui/PulseLoader';
 
 import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
-import InputField from '@/components/form/InputField';
-import ToggleSwitch from '@/components/form/ToggleSwitch';
 import SeriesImportSelector from '@/components/form/SeriesImportSelector';
-import AlertBox from '@/components/AlertBox';
+import AlertBox from '@/components/ui/AlertBox';
 
 import CharacterSettingsList from './CharacterSettingsList';
 import CharacterSettingsDetail from './CharacterSettingsDetail';
@@ -21,7 +18,7 @@ import CharacterSettingsEdit from './CharacterSettingsEdit';
 interface CharacterSettingsProps {
     entityType?: 'book' | 'series';
     entityId?: string;
-    showToggle?: boolean;
+    toolEnabled?: boolean;
 }
 
 /**
@@ -30,23 +27,23 @@ interface CharacterSettingsProps {
  * Inclut: toggle tool, import from series, header avec actions
  */
 export default function CharacterSettings({
-    entityType = 'book',
-    entityId,
-    showToggle = true,
-}: CharacterSettingsProps): React.JSX.Element {
+                                              entityType = 'book',
+                                              entityId,
+                                              toolEnabled: parentToolEnabled,
+                                          }: CharacterSettingsProps): React.JSX.Element {
     const t = useTranslations();
-    const {book} = useContext(BookContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
     const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
-
+    
     const resolvedEntityId: string = entityId || book?.bookId || '';
-
+    
     const config: UseCharactersConfig = useMemo(function (): UseCharactersConfig {
         return {
             entityType,
             entityId: resolvedEntityId,
         };
     }, [entityType, resolvedEntityId]);
-
+    
     const {
         characters,
         seriesCharacters,
@@ -72,7 +69,7 @@ export default function CharacterSettings({
         backToList,
         addNewCharacter,
     } = useCharacters(config);
-
+    
     const availableSeriesCharacters = useMemo(function (): SeriesCharacterProps[] {
         return seriesCharacters.filter(function (sc: SeriesCharacterProps): boolean {
             return !characters.some(function (c: CharacterProps): boolean {
@@ -80,19 +77,19 @@ export default function CharacterSettings({
             });
         });
     }, [seriesCharacters, characters]);
-
+    
     const handleCharacterChange = useCallback(function (key: keyof CharacterProps, value: string | number | null): void {
         updateCharacterField(key, value);
     }, [updateCharacterField]);
-
+    
     async function handleSave(): Promise<void> {
         await exitEditMode(true);
     }
-
+    
     function handleCancel(): void {
         exitEditMode(false);
     }
-
+    
     async function handleDelete(): Promise<void> {
         if (selectedCharacter?.id) {
             await deleteCharacter(selectedCharacter.id);
@@ -100,25 +97,21 @@ export default function CharacterSettings({
             backToList();
         }
     }
-
+    
     function getSeriesCharacterForSelected(): SeriesCharacterProps | null {
         if (!selectedCharacter?.seriesCharacterId) return null;
         return seriesCharacters.find(function (sc: SeriesCharacterProps): boolean {
             return sc.id === selectedCharacter.seriesCharacterId;
         }) || null;
     }
-
+    
     if (isLoading) {
-        return (
-            <div className="flex items-center justify-center py-12">
-                <FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
-            </div>
-        );
+        return <PulseLoader/>;
     }
-
+    
     const isNew: boolean = selectedCharacter?.id === null;
     const canExport: boolean = Boolean(bookSeriesId && selectedCharacter?.id && !selectedCharacter.seriesCharacterId);
-
+    
     return (
         <div className="flex flex-col h-full">
             {/* Header - uniquement pour detail/edit */}
@@ -131,37 +124,19 @@ export default function CharacterSettings({
                 onEdit={enterEditMode}
                 onSave={handleSave}
                 onCancel={handleCancel}
-                onDelete={function (): void { setShowDeleteConfirm(true); }}
+                onDelete={function (): void {
+                    setShowDeleteConfirm(true);
+                }}
                 onExport={canExport ? exportToSeries : undefined}
                 showExport={canExport}
                 showDelete={Boolean(selectedCharacter?.id)}
             />
-
+            
             {/* Contenu principal */}
             <div className="flex-1 overflow-y-auto">
                 {viewMode === 'list' && (
                     <div className="space-y-5 p-4">
-                        {/* Toggle tool */}
-                        {showToggle && !isSeriesMode && (
-                            <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
-                                <InputField
-                                    icon={faToggleOn}
-                                    fieldName={t('characterComponent.enableTool')}
-                                    input={
-                                        <ToggleSwitch
-                                            checked={toolEnabled}
-                                            onChange={toggleTool}
-                                        />
-                                    }
-                                />
-                                <p className="text-muted text-sm mt-2">
-                                    {t('characterComponent.enableToolDescription')}
-                                </p>
-                            </div>
-                        )}
-
-                        {/* Contenu si outil activé */}
-                        {(toolEnabled || isSeriesMode) && (
+                        {((parentToolEnabled !== undefined ? parentToolEnabled : toolEnabled) || isSeriesMode) && (
                             <>
                                 {/* Import from series */}
                                 {!isSeriesMode && bookSeriesId && availableSeriesCharacters.length > 0 && (
@@ -177,7 +152,7 @@ export default function CharacterSettings({
                                         label={t('seriesImport.importFromSeries')}
                                     />
                                 )}
-
+                                
                                 {/* Liste des personnages */}
                                 <CharacterSettingsList
                                     characters={characters}
@@ -188,7 +163,7 @@ export default function CharacterSettings({
                         )}
                     </div>
                 )}
-
+                
                 {viewMode === 'detail' && selectedCharacter && (
                     <div className="p-4">
                         <CharacterSettingsDetail
@@ -197,7 +172,7 @@ export default function CharacterSettings({
                         />
                     </div>
                 )}
-
+                
                 {viewMode === 'edit' && selectedCharacter && (
                     <div className="p-4">
                         <CharacterSettingsEdit
@@ -212,7 +187,7 @@ export default function CharacterSettings({
                     </div>
                 )}
             </div>
-
+            
             {/* Modal de confirmation de suppression */}
             {showDeleteConfirm && selectedCharacter?.id && (
                 <AlertBox
@@ -222,7 +197,9 @@ export default function CharacterSettings({
                     confirmText={t('common.delete')}
                     cancelText={t('common.cancel')}
                     onConfirm={handleDelete}
-                    onCancel={function (): void { setShowDeleteConfirm(false); }}
+                    onCancel={function (): void {
+                        setShowDeleteConfirm(false);
+                    }}
                 />
             )}
         </div>
diff --git a/components/book/settings/characters/settings/CharacterSettingsDetail.tsx b/components/book/settings/characters/settings/CharacterSettingsDetail.tsx
index eede8bc..3094f54 100644
--- a/components/book/settings/characters/settings/CharacterSettingsDetail.tsx
+++ b/components/book/settings/characters/settings/CharacterSettingsDetail.tsx
@@ -1,45 +1,39 @@
 'use client';
 import React, {useContext, useEffect, useState} from 'react';
+import {Attribute, CharacterAttribute, CharacterElement, CharacterProps} from '@/lib/types/character';
+import {SelectBoxProps} from '@/components/form/SelectBox';
 import {
     advancedCharacterElements,
-    Attribute,
     basicCharacterElements,
-    CharacterAttribute,
     characterCategories,
-    CharacterElement,
-    CharacterProps,
     characterStatus
-} from '@/lib/models/Character';
-import {SeriesCharacterProps} from '@/lib/models/Series';
-import CollapsableArea from '@/components/CollapsableArea';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+} from '@/lib/constants/character';
+import {SeriesCharacterProps} from '@/lib/types/series';
+import Badge from '@/components/ui/Badge';
+import Collapse from '@/components/ui/Collapse';
 import {
-    faBook,
-    faCommentDots,
-    faGlobe,
-    faSliders,
-    faStickyNote,
-    faUser,
-    faVenusMars,
-    faCakeCandles,
-    faTag,
-    faCrown,
-    faQuoteLeft,
-    faFlag,
-    faHouse,
-    faSkull,
-    faDna,
-    faPalette,
-    faNoteSticky
-} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
-import {SessionContext} from '@/context/SessionContext';
-import {AlertContext} from '@/context/AlertContext';
-import {LangContext} from '@/context/LangContext';
-import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
-import {BookContext} from '@/context/BookContext';
-import System from '@/lib/models/System';
-import * as tauri from '@/lib/tauri';
+    Book,
+    Cake,
+    Dna,
+    Flag,
+    Globe,
+    Home,
+    MessageCircle,
+    Palette,
+    Quote,
+    Skull,
+    SlidersHorizontal,
+    StickyNote,
+    Tag,
+    User,
+    Users
+} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
+import {dynamicBg} from '@/lib/utils/dynamicStyles';
+import {LangContext, LangContextProps} from '@/context/LangContext';
+import {apiGet} from '@/lib/api/client';
 
 type AttributeResponse = { type: string; values: Attribute[] }[];
 
@@ -50,37 +44,30 @@ interface CharacterSettingsDetailProps {
 }
 
 export default function CharacterSettingsDetail({
-    character,
-    seriesCharacter,
-    onLoadAttributes,
-}: CharacterSettingsDetailProps): React.JSX.Element {
+                                                    character,
+                                                    seriesCharacter,
+                                                    onLoadAttributes,
+                                                }: CharacterSettingsDetailProps): React.JSX.Element {
     const t = useTranslations();
-    const {lang} = useContext(LangContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage} = useContext(AlertContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {book} = useContext(BookContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
     const [showAdvanced, setShowAdvanced] = useState<boolean>(false);
-
+    
     useEffect(function (): void {
         if (character?.id !== null) {
             getAttributes().then();
         }
     }, [character?.id]);
-
+    
     async function getAttributes(): Promise<void> {
         try {
-            let response: AttributeResponse;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getCharacterAttributes(character?.id!) as AttributeResponse;
-            } else {
-                response = await System.authGetQueryToServer<AttributeResponse>(
-                    'character/attribute',
-                    session.accessToken,
-                    lang,
-                    {characterId: character?.id}
-                );
-            }
+            const response: AttributeResponse = await apiGet<AttributeResponse>(
+                'character/attribute',
+                session.accessToken,
+                lang,
+                {characterId: character?.id}
+            );
             if (response && onLoadAttributes) {
                 const attributes: CharacterAttribute = {};
                 response.forEach(function (item: { type: string; values: Attribute[] }): void {
@@ -94,53 +81,56 @@ export default function CharacterSettingsDetail({
             }
         }
     }
-
+    
     function getCategoryLabel(): string {
-        const cat = characterCategories.find(c => c.value === character.category);
+        const cat: SelectBoxProps | undefined = characterCategories.find((c: SelectBoxProps): boolean => c.value === character.category);
         return cat ? t(cat.label) : character.category || '—';
     }
 
     function getStatusLabel(): string {
-        const stat = characterStatus.find(s => s.value === character.status);
+        const stat: SelectBoxProps | undefined = characterStatus.find((s: SelectBoxProps): boolean => s.value === character.status);
         return stat ? t(stat.label) : character.status || '—';
     }
-
+    
     function renderAttributeSection(element: CharacterElement): React.JSX.Element | null {
-        const attributes: Attribute[] = character[element.section] as Attribute[] || [];
+        const attributes: Attribute[] = character[element.section] || [];
         if (attributes.length === 0) return null;
-
+        
         return (
-            <CollapsableArea key={element.section} title={element.title} icon={element.icon}>
-                <div className="flex flex-wrap gap-2 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
-                    {attributes.map(function (attr: Attribute, index: number): React.JSX.Element {
-                        return (
-                            <span key={index} className="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm border border-primary/30">
-                                {attr.name}
-                            </span>
-                        );
-                    })}
-                </div>
-            </CollapsableArea>
+            <Collapse variant="card" key={element.section} title={element.title} icon={element.icon}>
+                    <div className="flex flex-wrap gap-2">
+                        {attributes.map(function (attr: Attribute, index: number): React.JSX.Element {
+                            return (
+                                <span key={index}
+                                      className="px-3 py-1 bg-primary/20 text-primary rounded-full text-sm border border-primary/30">
+                                    {attr.name}
+                                </span>
+                            );
+                        })}
+                    </div>
+            </Collapse>
         );
     }
-
+    
     return (
         <div className="space-y-6 px-2 pb-4">
             {/* Hero Section - Image + Infos principales */}
-            <div className="flex gap-6 p-6 bg-gradient-to-r from-secondary/30 to-transparent rounded-2xl border border-secondary/30">
+            <div
+                className="flex gap-6 p-6 bg-gradient-to-r from-secondary to-transparent rounded-2xl border border-secondary">
                 {/* Image */}
                 <div className="shrink-0">
                     {character.image ? (
-                        <div className="w-32 h-32 rounded-2xl border-4 border-primary/50 overflow-hidden shadow-lg">
+                        <div className="w-32 h-32 rounded-2xl border-4 border-primary overflow-hidden">
                             <img src={character.image} alt={character.name} className="w-full h-full object-cover"/>
                         </div>
                     ) : (
-                        <div className="w-32 h-32 rounded-2xl border-4 border-secondary/50 bg-secondary/30 flex items-center justify-center">
-                            <FontAwesomeIcon icon={faUser} className="w-12 h-12 text-text-secondary/50"/>
+                        <div
+                            className="w-32 h-32 rounded-2xl border-4 border-secondary bg-secondary flex items-center justify-center">
+                            <User className="w-12 h-12 text-text-secondary" strokeWidth={1.75}/>
                         </div>
                     )}
                 </div>
-
+                
                 {/* Infos principales */}
                 <div className="flex-1 min-w-0">
                     <h2 className="text-2xl font-bold text-text-primary">
@@ -152,170 +142,170 @@ export default function CharacterSettingsDetail({
                     {character.title && (
                         <p className="text-text-secondary mt-2">{character.title}</p>
                     )}
-
+                    
                     {/* Badges */}
                     <div className="flex flex-wrap gap-2 mt-4">
-                        <span className="inline-flex items-center gap-2 px-3 py-1 bg-primary/20 text-primary rounded-lg text-sm border border-primary/30">
-                            <FontAwesomeIcon icon={faTag} className="w-3 h-3"/>
-                            {getCategoryLabel()}
-                        </span>
+                        <Badge variant="primary" icon={Tag} shape="rounded">{getCategoryLabel()}</Badge>
                         {character.gender && (
-                            <span className="inline-flex items-center gap-2 px-3 py-1 bg-secondary/50 text-text-primary rounded-lg text-sm border border-secondary/50">
-                                <FontAwesomeIcon icon={faVenusMars} className="w-3 h-3"/>
-                                {character.gender}
-                            </span>
+                            <Badge variant="muted" icon={Users} shape="rounded">{character.gender}</Badge>
                         )}
                         {character.age && (
-                            <span className="inline-flex items-center gap-2 px-3 py-1 bg-secondary/50 text-text-primary rounded-lg text-sm border border-secondary/50">
-                                <FontAwesomeIcon icon={faCakeCandles} className="w-3 h-3"/>
-                                {character.age} {t('characterDetail.yearsOld')}
-                            </span>
+                            <Badge variant="muted" icon={Cake}
+                                   shape="rounded">{character.age} {t('characterDetail.yearsOld')}</Badge>
                         )}
                     </div>
                 </div>
             </div>
-
+            
             {/* Histoire & Biographie */}
-            <CollapsableArea title={t('characterDetail.historySection')} icon={faBook}>
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+            <Collapse variant="card" title={t('characterDetail.historySection')} icon={Book}>
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                     <div className="lg:col-span-2">
                         <h4 className="text-text-secondary text-xs uppercase tracking-wide mb-2">{t('characterDetail.biography')}</h4>
-                        <p className={`${character.biography ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
+                        <p className={`${character.biography ? 'text-text-primary' : 'text-text-dimmed italic'}`}>
                             {character.biography || '—'}
                         </p>
                     </div>
                     <div>
                         <h4 className="text-text-secondary text-xs uppercase tracking-wide mb-2">{t('characterDetail.history')}</h4>
-                        <p className={`${character.history ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
+                        <p className={`${character.history ? 'text-text-primary' : 'text-text-dimmed italic'}`}>
                             {character.history || '—'}
                         </p>
                     </div>
                     <div>
                         <h4 className="text-text-secondary text-xs uppercase tracking-wide mb-2">{t('characterDetail.roleFull')}</h4>
-                        <p className={`${character.role ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
+                        <p className={`${character.role ? 'text-text-primary' : 'text-text-dimmed italic'}`}>
                             {character.role || '—'}
                         </p>
                     </div>
                 </div>
-            </CollapsableArea>
+            </Collapse>
 
             {/* Attributs de base */}
             {basicCharacterElements.map(renderAttributeSection)}
-
+            
             {/* Toggle Mode Avancé */}
-            <div className="flex items-center justify-between p-4 bg-secondary/30 rounded-xl border border-secondary/50">
+            <div
+                className="flex items-center justify-between p-4 bg-secondary rounded-xl border border-secondary">
                 <div className="flex items-center gap-3">
-                    <FontAwesomeIcon icon={faSliders} className="text-primary w-5 h-5"/>
+                    <SlidersHorizontal className="text-primary w-5 h-5" strokeWidth={1.75}/>
                     <span className="text-text-primary font-medium">{t('characterDetail.advancedMode')}</span>
                 </div>
                 <button
-                    onClick={function (): void { setShowAdvanced(!showAdvanced); }}
+                    onClick={function (): void {
+                        setShowAdvanced(!showAdvanced);
+                    }}
                     className={`px-4 py-2 rounded-lg transition-all duration-200 ${
                         showAdvanced
-                            ? 'bg-primary text-white'
-                            : 'bg-secondary/50 text-text-primary hover:bg-secondary'
+                            ? 'bg-primary text-text-primary'
+                            : 'bg-secondary text-text-primary hover:bg-gray-dark'
                     }`}
                 >
                     {showAdvanced ? t('characterDetail.hideAdvanced') : t('characterDetail.showAdvanced')}
                 </button>
             </div>
-
+            
             {/* Sections avancées */}
             {showAdvanced && (
                 <>
                     {/* Identité étendue */}
-                    <CollapsableArea title={t('characterDetail.identitySection')} icon={faGlobe}>
-                        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
-                            <div className="p-3 bg-dark-background/30 rounded-lg">
+                    <Collapse variant="card" title={t('characterDetail.identitySection')} icon={Globe}>
+                            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+                                <div className="p-3 rounded-lg">
                                 <div className="flex items-center gap-2 mb-2">
-                                    <FontAwesomeIcon icon={faDna} className="w-3 h-3 text-primary"/>
-                                    <span className="text-text-secondary text-xs uppercase">{t('characterDetail.species')}</span>
+                                    <Dna className="w-3 h-3 text-primary" strokeWidth={1.75}/>
+                                    <span
+                                        className="text-text-secondary text-xs uppercase">{t('characterDetail.species')}</span>
                                 </div>
-                                <p className={character.species ? 'text-text-primary' : 'text-text-secondary/50 italic'}>
+                                    <p className={character.species ? 'text-text-primary' : 'text-text-dimmed italic'}>
                                     {character.species || '—'}
                                 </p>
                             </div>
-                            <div className="p-3 bg-dark-background/30 rounded-lg">
+                                <div className="p-3 rounded-lg">
                                 <div className="flex items-center gap-2 mb-2">
-                                    <FontAwesomeIcon icon={faFlag} className="w-3 h-3 text-primary"/>
-                                    <span className="text-text-secondary text-xs uppercase">{t('characterDetail.nationality')}</span>
+                                    <Flag className="w-3 h-3 text-primary" strokeWidth={1.75}/>
+                                    <span
+                                        className="text-text-secondary text-xs uppercase">{t('characterDetail.nationality')}</span>
                                 </div>
-                                <p className={character.nationality ? 'text-text-primary' : 'text-text-secondary/50 italic'}>
+                                    <p className={character.nationality ? 'text-text-primary' : 'text-text-dimmed italic'}>
                                     {character.nationality || '—'}
                                 </p>
                             </div>
-                            <div className="p-3 bg-dark-background/30 rounded-lg">
+                                <div className="p-3 rounded-lg">
                                 <div className="flex items-center gap-2 mb-2">
-                                    <FontAwesomeIcon icon={faSkull} className="w-3 h-3 text-primary"/>
-                                    <span className="text-text-secondary text-xs uppercase">{t('characterDetail.status')}</span>
+                                    <Skull className="w-3 h-3 text-primary" strokeWidth={1.75}/>
+                                    <span
+                                        className="text-text-secondary text-xs uppercase">{t('characterDetail.status')}</span>
                                 </div>
-                                <p className={character.status ? 'text-text-primary' : 'text-text-secondary/50 italic'}>
+                                    <p className={character.status ? 'text-text-primary' : 'text-text-dimmed italic'}>
                                     {getStatusLabel()}
                                 </p>
                             </div>
-                            <div className="p-3 bg-dark-background/30 rounded-lg">
+                                <div className="p-3 rounded-lg">
                                 <div className="flex items-center gap-2 mb-2">
-                                    <FontAwesomeIcon icon={faHouse} className="w-3 h-3 text-primary"/>
-                                    <span className="text-text-secondary text-xs uppercase">{t('characterDetail.residence')}</span>
+                                    <Home className="w-3 h-3 text-primary" strokeWidth={1.75}/>
+                                    <span
+                                        className="text-text-secondary text-xs uppercase">{t('characterDetail.residence')}</span>
                                 </div>
-                                <p className={character.residence ? 'text-text-primary' : 'text-text-secondary/50 italic'}>
+                                    <p className={character.residence ? 'text-text-primary' : 'text-text-dimmed italic'}>
                                     {character.residence || '—'}
                                 </p>
                             </div>
                         </div>
-                    </CollapsableArea>
+                    </Collapse>
 
                     {/* Voix du personnage */}
-                    <CollapsableArea title={t('characterDetail.voiceSection')} icon={faCommentDots}>
-                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
-                            <div className="p-4 bg-dark-background/30 rounded-lg">
+                    <Collapse variant="card" title={t('characterDetail.voiceSection')} icon={MessageCircle}>
+                            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                                <div className="p-4 rounded-lg">
                                 <h4 className="text-text-secondary text-xs uppercase tracking-wide mb-2">{t('characterDetail.speechPattern')}</h4>
-                                <p className={`${character.speechPattern ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
+                                    <p className={`${character.speechPattern ? 'text-text-primary' : 'text-text-dimmed italic'}`}>
                                     {character.speechPattern || '—'}
                                 </p>
                             </div>
-                            <div className="p-4 bg-dark-background/30 rounded-lg relative">
-                                <FontAwesomeIcon icon={faQuoteLeft} className="absolute top-2 left-2 w-6 h-6 text-primary/20"/>
+                                <div className="p-4 rounded-lg relative">
+                                <Quote className="absolute top-2 left-2 w-6 h-6 text-primary/20" strokeWidth={1.75}/>
                                 <h4 className="text-text-secondary text-xs uppercase tracking-wide mb-2">{t('characterDetail.catchphrase')}</h4>
-                                <p className={`italic ${character.catchphrase ? 'text-text-primary' : 'text-text-secondary/50'}`}>
+                                    <p className={`italic ${character.catchphrase ? 'text-text-primary' : 'text-text-dimmed'}`}>
                                     {character.catchphrase ? `« ${character.catchphrase} »` : '—'}
                                 </p>
                             </div>
                         </div>
-                    </CollapsableArea>
+                    </Collapse>
 
                     {/* Notes de l'auteur */}
-                    <CollapsableArea title={t('characterDetail.authorSection')} icon={faStickyNote}>
-                        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
-                            <div className="lg:col-span-2 p-4 bg-dark-background/30 rounded-lg">
+                    <Collapse variant="card" title={t('characterDetail.authorSection')} icon={StickyNote}>
+                            <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+                                <div className="lg:col-span-2 p-4 rounded-lg">
                                 <div className="flex items-center gap-2 mb-2">
-                                    <FontAwesomeIcon icon={faNoteSticky} className="w-3 h-3 text-primary"/>
-                                    <span className="text-text-secondary text-xs uppercase">{t('characterDetail.notes')}</span>
+                                    <StickyNote className="w-3 h-3 text-primary" strokeWidth={1.75}/>
+                                    <span
+                                        className="text-text-secondary text-xs uppercase">{t('characterDetail.notes')}</span>
                                 </div>
-                                <p className={`${character.notes ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
+                                    <p className={`${character.notes ? 'text-text-primary' : 'text-text-dimmed italic'}`}>
                                     {character.notes || '—'}
                                 </p>
                             </div>
-                            <div className="p-4 bg-dark-background/30 rounded-lg">
+                                <div className="p-4 rounded-lg">
                                 <div className="flex items-center gap-2 mb-2">
-                                    <FontAwesomeIcon icon={faPalette} className="w-3 h-3 text-primary"/>
-                                    <span className="text-text-secondary text-xs uppercase">{t('characterDetail.colorLabel')}</span>
+                                    <Palette className="w-3 h-3 text-primary" strokeWidth={1.75}/>
+                                    <span
+                                        className="text-text-secondary text-xs uppercase">{t('characterDetail.colorLabel')}</span>
                                 </div>
                                 {character.color ? (
                                     <div className="flex items-center gap-3">
                                         <div
-                                            className="w-8 h-8 rounded-lg border-2 border-white/20"
-                                            style={{backgroundColor: character.color}}
+                                            className={`w-8 h-8 rounded-lg border-2 border-secondary ${character.color ? dynamicBg(character.color) : ''}`}
                                         />
                                         <span className="text-text-primary font-mono">{character.color}</span>
                                     </div>
                                 ) : (
-                                    <p className="text-text-secondary/50 italic">—</p>
+                                    <p className="text-text-dimmed italic">—</p>
                                 )}
                             </div>
                         </div>
-                    </CollapsableArea>
-
+                    </Collapse>
+                    
                     {/* Attributs avancés */}
                     {advancedCharacterElements.map(renderAttributeSection)}
                 </>
diff --git a/components/book/settings/characters/settings/CharacterSettingsEdit.tsx b/components/book/settings/characters/settings/CharacterSettingsEdit.tsx
index a169d4f..2efc753 100644
--- a/components/book/settings/characters/settings/CharacterSettingsEdit.tsx
+++ b/components/book/settings/characters/settings/CharacterSettingsEdit.tsx
@@ -1,43 +1,35 @@
 'use client';
-import React, {useContext, useEffect, useMemo, useState} from 'react';
+import React, {Dispatch, SetStateAction, useContext, useEffect, useState} from 'react';
 import {
-    advancedCharacterElements,
     Attribute,
-    basicCharacterElements,
     CharacterAttribute,
-    characterCategories,
+    CharacterAttributeSection,
     CharacterElement,
     CharacterProps,
+    isCharacterCategory,
+    isCharacterStatus,
+} from '@/lib/types/character';
+import {
+    advancedCharacterElements,
+    basicCharacterElements,
+    characterCategories,
     characterStatus
-} from '@/lib/models/Character';
-import {SeriesCharacterProps} from '@/lib/models/Series';
-import CollapsableArea from '@/components/CollapsableArea';
+} from '@/lib/constants/character';
+import {SeriesCharacterProps} from '@/lib/types/series';
+import Collapse from '@/components/ui/Collapse';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import TexteAreaInput from '@/components/form/TexteAreaInput';
+import TextAreaInput from '@/components/form/TextAreaInput';
 import NumberInput from '@/components/form/NumberInput';
 import SelectBox from '@/components/form/SelectBox';
 import CharacterSectionElement from '@/components/book/settings/characters/CharacterSectionElement';
 import SyncFieldWrapper from '@/components/form/SyncFieldWrapper';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {
-    faBook,
-    faCommentDots,
-    faGlobe,
-    faScroll,
-    faSliders,
-    faStickyNote,
-    faUser
-} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
-import {SessionContext} from '@/context/SessionContext';
-import {AlertContext} from '@/context/AlertContext';
-import {LangContext} from '@/context/LangContext';
-import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
-import {BookContext} from '@/context/BookContext';
-import System from '@/lib/models/System';
-import {Dispatch, SetStateAction} from 'react';
-import * as tauri from '@/lib/tauri';
+import {Book, Globe, MessageCircle, ScrollText, SlidersHorizontal, StickyNote, User} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
+import {LangContext, LangContextProps} from '@/context/LangContext';
+import {apiGet} from '@/lib/api/client';
 
 type AttributeResponse = { type: string; values: Attribute[] }[];
 
@@ -45,8 +37,8 @@ interface CharacterSettingsEditProps {
     character: CharacterProps;
     setCharacter: Dispatch<SetStateAction<CharacterProps | null>>;
     onCharacterChange: (key: keyof CharacterProps, value: string | number | null) => void;
-    onAddAttribute: (section: keyof CharacterProps, attr: Attribute) => Promise<void>;
-    onRemoveAttribute: (section: keyof CharacterProps, idx: number, id: string) => Promise<void>;
+    onAddAttribute: (section: CharacterAttributeSection, attr: Attribute) => Promise<void>;
+    onRemoveAttribute: (section: CharacterAttributeSection, idx: number, id: string) => Promise<void>;
     seriesCharacter?: SeriesCharacterProps | null;
     onSyncComplete?: () => void;
 }
@@ -57,54 +49,34 @@ interface CharacterSettingsEditProps {
  * PAS de scroll interne (géré par parent)
  */
 export default function CharacterSettingsEdit({
-    character,
-    setCharacter,
-    onCharacterChange,
-    onAddAttribute,
-    onRemoveAttribute,
-    seriesCharacter,
-    onSyncComplete,
-}: CharacterSettingsEditProps): React.JSX.Element {
+                                                  character,
+                                                  setCharacter,
+                                                  onCharacterChange,
+                                                  onAddAttribute,
+                                                  onRemoveAttribute,
+                                                  seriesCharacter,
+                                                  onSyncComplete,
+                                              }: CharacterSettingsEditProps): React.JSX.Element {
     const t = useTranslations();
-    const {lang} = useContext(LangContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage} = useContext(AlertContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {book} = useContext(BookContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
     const [showAdvanced, setShowAdvanced] = useState<boolean>(false);
-
-    // Traduire les données des SelectBox
-    const translatedCharacterCategories = useMemo(() =>
-        characterCategories.map((item) => ({
-            ...item,
-            label: t(item.label)
-        })), [t]);
-
-    const translatedCharacterStatus = useMemo(() =>
-        characterStatus.map((item) => ({
-            ...item,
-            label: t(item.label)
-        })), [t]);
-
+    
     useEffect(function (): void {
         if (character?.id !== null) {
             getAttributes().then();
         }
     }, [character?.id]);
-
+    
     async function getAttributes(): Promise<void> {
         try {
-            let response: AttributeResponse;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getCharacterAttributes(character?.id!) as AttributeResponse;
-            } else {
-                response = await System.authGetQueryToServer<AttributeResponse>(
-                    'character/attribute',
-                    session.accessToken,
-                    lang,
-                    {characterId: character?.id}
-                );
-            }
+            const response: AttributeResponse = await apiGet<AttributeResponse>(
+                'character/attribute',
+                session.accessToken,
+                lang,
+                {characterId: character?.id}
+            );
             if (response) {
                 const attributes: CharacterAttribute = {};
                 response.forEach(function (item: { type: string; values: Attribute[] }): void {
@@ -141,12 +113,11 @@ export default function CharacterSettingsEdit({
             }
         }
     }
-
+    
     return (
         <div className="space-y-4 px-2 pb-4">
             {/* Informations de base */}
-            <CollapsableArea title={t('characterDetail.basicInfo')} icon={faUser}>
-                <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+            <Collapse variant="card" title={t('characterDetail.basicInfo')} icon={User}>
                     <InputField
                         fieldName={t('characterDetail.name')}
                         input={
@@ -157,7 +128,9 @@ export default function CharacterSettingsEdit({
                                 bookElementId={character.id || ''}
                                 field="name"
                                 elementType="character"
-                                onDownload={function (): void { onCharacterChange('name', seriesCharacter?.name || ''); }}
+                                onDownload={function (): void {
+                                    onCharacterChange('name', seriesCharacter?.name || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
                                 <TextInput
@@ -170,7 +143,7 @@ export default function CharacterSettingsEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.lastName')}
                         input={
@@ -181,7 +154,9 @@ export default function CharacterSettingsEdit({
                                 bookElementId={character.id || ''}
                                 field="lastName"
                                 elementType="character"
-                                onDownload={function (): void { onCharacterChange('lastName', seriesCharacter?.lastName || ''); }}
+                                onDownload={function (): void {
+                                    onCharacterChange('lastName', seriesCharacter?.lastName || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
                                 <TextInput
@@ -194,7 +169,7 @@ export default function CharacterSettingsEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.nickname')}
                         input={
@@ -205,7 +180,9 @@ export default function CharacterSettingsEdit({
                                 bookElementId={character.id || ''}
                                 field="nickname"
                                 elementType="character"
-                                onDownload={function (): void { onCharacterChange('nickname', seriesCharacter?.nickname || ''); }}
+                                onDownload={function (): void {
+                                    onCharacterChange('nickname', seriesCharacter?.nickname || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
                                 <TextInput
@@ -218,7 +195,7 @@ export default function CharacterSettingsEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.role')}
                         input={
@@ -230,8 +207,12 @@ export default function CharacterSettingsEdit({
                                 field="category"
                                 elementType="character"
                                 onDownload={function (): void {
+                                    const categoryValue: string = seriesCharacter?.category || 'none';
                                     setCharacter(function (prev: CharacterProps | null): CharacterProps | null {
-                                        return prev ? {...prev, category: (seriesCharacter?.category || 'none') as CharacterProps['category']} : prev;
+                                        return prev ? {
+                                            ...prev,
+                                            category: isCharacterCategory(categoryValue) ? categoryValue : 'none'
+                                        } : prev;
                                     });
                                 }}
                                 onSyncComplete={onSyncComplete}
@@ -239,16 +220,21 @@ export default function CharacterSettingsEdit({
                                 <SelectBox
                                     defaultValue={character.category || 'none'}
                                     onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
+                                        const selectedCategory: string = e.target.value;
                                         setCharacter(function (prev: CharacterProps | null): CharacterProps | null {
-                                            return prev ? {...prev, category: e.target.value as CharacterProps['category']} : prev;
+                                            return prev ? {
+                                                ...prev,
+                                                category: isCharacterCategory(selectedCategory) ? selectedCategory : 'none'
+                                            } : prev;
                                         });
                                     }}
-                                    data={translatedCharacterCategories}
+                                    data={characterCategories}
+                                    translate
                                 />
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.title')}
                         input={
@@ -259,7 +245,9 @@ export default function CharacterSettingsEdit({
                                 bookElementId={character.id || ''}
                                 field="title"
                                 elementType="character"
-                                onDownload={function (): void { onCharacterChange('title', seriesCharacter?.title || ''); }}
+                                onDownload={function (): void {
+                                    onCharacterChange('title', seriesCharacter?.title || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
                                 <TextInput
@@ -272,7 +260,7 @@ export default function CharacterSettingsEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.gender')}
                         input={
@@ -283,7 +271,9 @@ export default function CharacterSettingsEdit({
                                 bookElementId={character.id || ''}
                                 field="gender"
                                 elementType="character"
-                                onDownload={function (): void { onCharacterChange('gender', seriesCharacter?.gender || ''); }}
+                                onDownload={function (): void {
+                                    onCharacterChange('gender', seriesCharacter?.gender || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
                                 <TextInput
@@ -296,7 +286,7 @@ export default function CharacterSettingsEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.age')}
                         input={
@@ -326,15 +316,13 @@ export default function CharacterSettingsEdit({
                             </SyncFieldWrapper>
                         }
                     />
-                </div>
-            </CollapsableArea>
+            </Collapse>
 
             {/* Histoire */}
-            <CollapsableArea title={t('characterDetail.historySection')} icon={faBook}>
-                <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+            <Collapse variant="card" title={t('characterDetail.historySection')} icon={Book}>
                     <InputField
                         fieldName={t('characterDetail.biography')}
-                        icon={faBook}
+                        icon={Book}
                         input={
                             <SyncFieldWrapper
                                 seriesElementId={character.seriesCharacterId}
@@ -343,10 +331,12 @@ export default function CharacterSettingsEdit({
                                 bookElementId={character.id || ''}
                                 field="biography"
                                 elementType="character"
-                                onDownload={function (): void { onCharacterChange('biography', seriesCharacter?.biography || ''); }}
+                                onDownload={function (): void {
+                                    onCharacterChange('biography', seriesCharacter?.biography || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
-                                <TexteAreaInput
+                                <TextAreaInput
                                     value={character.biography || ''}
                                     setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                         onCharacterChange('biography', e.target.value);
@@ -356,10 +346,10 @@ export default function CharacterSettingsEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.history')}
-                        icon={faScroll}
+                        icon={ScrollText}
                         input={
                             <SyncFieldWrapper
                                 seriesElementId={character.seriesCharacterId}
@@ -368,10 +358,12 @@ export default function CharacterSettingsEdit({
                                 bookElementId={character.id || ''}
                                 field="history"
                                 elementType="character"
-                                onDownload={function (): void { onCharacterChange('history', seriesCharacter?.history || ''); }}
+                                onDownload={function (): void {
+                                    onCharacterChange('history', seriesCharacter?.history || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
-                                <TexteAreaInput
+                                <TextAreaInput
                                     value={character.history || ''}
                                     setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                         onCharacterChange('history', e.target.value);
@@ -381,10 +373,10 @@ export default function CharacterSettingsEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('characterDetail.roleFull')}
-                        icon={faScroll}
+                        icon={ScrollText}
                         input={
                             <SyncFieldWrapper
                                 seriesElementId={character.seriesCharacterId}
@@ -393,10 +385,12 @@ export default function CharacterSettingsEdit({
                                 bookElementId={character.id || ''}
                                 field="role"
                                 elementType="character"
-                                onDownload={function (): void { onCharacterChange('role', seriesCharacter?.role || ''); }}
+                                onDownload={function (): void {
+                                    onCharacterChange('role', seriesCharacter?.role || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
-                                <TexteAreaInput
+                                <TextAreaInput
                                     value={character.role || ''}
                                     setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                         onCharacterChange('role', e.target.value);
@@ -406,8 +400,7 @@ export default function CharacterSettingsEdit({
                             </SyncFieldWrapper>
                         }
                     />
-                </div>
-            </CollapsableArea>
+            </Collapse>
 
             {/* Attributs de base */}
             {basicCharacterElements.map(function (item: CharacterElement, index: number): React.JSX.Element {
@@ -425,31 +418,33 @@ export default function CharacterSettingsEdit({
                     />
                 );
             })}
-
+            
             {/* Toggle Mode Avancé */}
-            <div className="flex items-center justify-between p-4 bg-secondary/30 rounded-xl border border-secondary/50">
+            <div
+                className="flex items-center justify-between p-4 bg-secondary rounded-xl border border-secondary">
                 <div className="flex items-center gap-3">
-                    <FontAwesomeIcon icon={faSliders} className="text-primary w-5 h-5"/>
+                    <SlidersHorizontal className="text-primary w-5 h-5" strokeWidth={1.75}/>
                     <span className="text-text-primary font-medium">{t('characterDetail.advancedMode')}</span>
                 </div>
                 <button
-                    onClick={function (): void { setShowAdvanced(!showAdvanced); }}
-                    className={`px-4 py-2 rounded-lg transition-all duration-200 ${
+                    onClick={function (): void {
+                        setShowAdvanced(!showAdvanced);
+                    }}
+                    className={`px-4 py-2 rounded-lg transition-colors duration-150 ${
                         showAdvanced
-                            ? 'bg-primary text-white'
-                            : 'bg-secondary/50 text-text-primary hover:bg-secondary'
+                            ? 'bg-secondary text-primary'
+                            : 'bg-secondary text-text-secondary hover:text-text-primary'
                     }`}
                 >
                     {showAdvanced ? t('characterDetail.hideAdvanced') : t('characterDetail.showAdvanced')}
                 </button>
             </div>
-
+            
             {/* Sections avancées */}
             {showAdvanced && (
                 <>
                     {/* Identité étendue */}
-                    <CollapsableArea title={t('characterDetail.identitySection')} icon={faGlobe}>
-                        <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+                    <Collapse variant="card" title={t('characterDetail.identitySection')} icon={Globe}>
                             <InputField
                                 fieldName={t('characterDetail.species')}
                                 input={
@@ -460,7 +455,9 @@ export default function CharacterSettingsEdit({
                                         bookElementId={character.id || ''}
                                         field="species"
                                         elementType="character"
-                                        onDownload={function (): void { onCharacterChange('species', seriesCharacter?.species || ''); }}
+                                        onDownload={function (): void {
+                                            onCharacterChange('species', seriesCharacter?.species || '');
+                                        }}
                                         onSyncComplete={onSyncComplete}
                                     >
                                         <TextInput
@@ -473,7 +470,7 @@ export default function CharacterSettingsEdit({
                                     </SyncFieldWrapper>
                                 }
                             />
-
+                            
                             <InputField
                                 fieldName={t('characterDetail.nationality')}
                                 input={
@@ -484,7 +481,9 @@ export default function CharacterSettingsEdit({
                                         bookElementId={character.id || ''}
                                         field="nationality"
                                         elementType="character"
-                                        onDownload={function (): void { onCharacterChange('nationality', seriesCharacter?.nationality || ''); }}
+                                        onDownload={function (): void {
+                                            onCharacterChange('nationality', seriesCharacter?.nationality || '');
+                                        }}
                                         onSyncComplete={onSyncComplete}
                                     >
                                         <TextInput
@@ -497,7 +496,7 @@ export default function CharacterSettingsEdit({
                                     </SyncFieldWrapper>
                                 }
                             />
-
+                            
                             <InputField
                                 fieldName={t('characterDetail.status')}
                                 input={
@@ -509,8 +508,12 @@ export default function CharacterSettingsEdit({
                                         field="status"
                                         elementType="character"
                                         onDownload={function (): void {
+                                            const statusValue: string = seriesCharacter?.status || 'alive';
                                             setCharacter(function (prev: CharacterProps | null): CharacterProps | null {
-                                                return prev ? {...prev, status: (seriesCharacter?.status || 'alive') as CharacterProps['status']} : prev;
+                                                return prev ? {
+                                                    ...prev,
+                                                    status: isCharacterStatus(statusValue) ? statusValue : 'alive'
+                                                } : prev;
                                             });
                                         }}
                                         onSyncComplete={onSyncComplete}
@@ -518,16 +521,21 @@ export default function CharacterSettingsEdit({
                                         <SelectBox
                                             defaultValue={character.status || 'alive'}
                                             onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
+                                                const selectedStatus: string = e.target.value;
                                                 setCharacter(function (prev: CharacterProps | null): CharacterProps | null {
-                                                    return prev ? {...prev, status: e.target.value as CharacterProps['status']} : prev;
+                                                    return prev ? {
+                                                        ...prev,
+                                                        status: isCharacterStatus(selectedStatus) ? selectedStatus : 'alive'
+                                                    } : prev;
                                                 });
                                             }}
-                                            data={translatedCharacterStatus}
+                                            data={characterStatus}
+                                            translate
                                         />
                                     </SyncFieldWrapper>
                                 }
                             />
-
+                            
                             <InputField
                                 fieldName={t('characterDetail.residence')}
                                 input={
@@ -538,7 +546,9 @@ export default function CharacterSettingsEdit({
                                         bookElementId={character.id || ''}
                                         field="residence"
                                         elementType="character"
-                                        onDownload={function (): void { onCharacterChange('residence', seriesCharacter?.residence || ''); }}
+                                        onDownload={function (): void {
+                                            onCharacterChange('residence', seriesCharacter?.residence || '');
+                                        }}
                                         onSyncComplete={onSyncComplete}
                                     >
                                         <TextInput
@@ -551,12 +561,10 @@ export default function CharacterSettingsEdit({
                                     </SyncFieldWrapper>
                                 }
                             />
-                        </div>
-                    </CollapsableArea>
+                    </Collapse>
 
                     {/* Voix du personnage */}
-                    <CollapsableArea title={t('characterDetail.voiceSection')} icon={faCommentDots}>
-                        <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+                    <Collapse variant="card" title={t('characterDetail.voiceSection')} icon={MessageCircle}>
                             <InputField
                                 fieldName={t('characterDetail.speechPattern')}
                                 input={
@@ -567,10 +575,12 @@ export default function CharacterSettingsEdit({
                                         bookElementId={character.id || ''}
                                         field="speechPattern"
                                         elementType="character"
-                                        onDownload={function (): void { onCharacterChange('speechPattern', seriesCharacter?.speechPattern || ''); }}
+                                        onDownload={function (): void {
+                                            onCharacterChange('speechPattern', seriesCharacter?.speechPattern || '');
+                                        }}
                                         onSyncComplete={onSyncComplete}
                                     >
-                                        <TexteAreaInput
+                                        <TextAreaInput
                                             value={character.speechPattern || ''}
                                             setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                                 onCharacterChange('speechPattern', e.target.value);
@@ -580,7 +590,7 @@ export default function CharacterSettingsEdit({
                                     </SyncFieldWrapper>
                                 }
                             />
-
+                            
                             <InputField
                                 fieldName={t('characterDetail.catchphrase')}
                                 input={
@@ -591,7 +601,9 @@ export default function CharacterSettingsEdit({
                                         bookElementId={character.id || ''}
                                         field="catchphrase"
                                         elementType="character"
-                                        onDownload={function (): void { onCharacterChange('catchphrase', seriesCharacter?.catchphrase || ''); }}
+                                        onDownload={function (): void {
+                                            onCharacterChange('catchphrase', seriesCharacter?.catchphrase || '');
+                                        }}
                                         onSyncComplete={onSyncComplete}
                                     >
                                         <TextInput
@@ -604,12 +616,10 @@ export default function CharacterSettingsEdit({
                                     </SyncFieldWrapper>
                                 }
                             />
-                        </div>
-                    </CollapsableArea>
-
+                    </Collapse>
+                    
                     {/* Notes de l'auteur */}
-                    <CollapsableArea title={t('characterDetail.authorSection')} icon={faStickyNote}>
-                        <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+                    <Collapse variant="card" title={t('characterDetail.authorSection')} icon={StickyNote}>
                             <InputField
                                 fieldName={t('characterDetail.notes')}
                                 input={
@@ -620,10 +630,12 @@ export default function CharacterSettingsEdit({
                                         bookElementId={character.id || ''}
                                         field="notes"
                                         elementType="character"
-                                        onDownload={function (): void { onCharacterChange('notes', seriesCharacter?.notes || ''); }}
+                                        onDownload={function (): void {
+                                            onCharacterChange('notes', seriesCharacter?.notes || '');
+                                        }}
                                         onSyncComplete={onSyncComplete}
                                     >
-                                        <TexteAreaInput
+                                        <TextAreaInput
                                             value={character.notes || ''}
                                             setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                                 onCharacterChange('notes', e.target.value);
@@ -633,7 +645,7 @@ export default function CharacterSettingsEdit({
                                     </SyncFieldWrapper>
                                 }
                             />
-
+                            
                             <InputField
                                 fieldName={t('characterDetail.colorLabel')}
                                 input={
@@ -644,7 +656,9 @@ export default function CharacterSettingsEdit({
                                         bookElementId={character.id || ''}
                                         field="color"
                                         elementType="character"
-                                        onDownload={function (): void { onCharacterChange('color', seriesCharacter?.color || ''); }}
+                                        onDownload={function (): void {
+                                            onCharacterChange('color', seriesCharacter?.color || '');
+                                        }}
                                         onSyncComplete={onSyncComplete}
                                     >
                                         <TextInput
@@ -657,9 +671,8 @@ export default function CharacterSettingsEdit({
                                     </SyncFieldWrapper>
                                 }
                             />
-                        </div>
-                    </CollapsableArea>
-
+                    </Collapse>
+                    
                     {/* Attributs avancés */}
                     {advancedCharacterElements.map(function (item: CharacterElement, index: number): React.JSX.Element {
                         return (
diff --git a/components/book/settings/characters/settings/CharacterSettingsList.tsx b/components/book/settings/characters/settings/CharacterSettingsList.tsx
index f1512a0..c605c97 100644
--- a/components/book/settings/characters/settings/CharacterSettingsList.tsx
+++ b/components/book/settings/characters/settings/CharacterSettingsList.tsx
@@ -1,13 +1,16 @@
 'use client';
 import React, {useState} from 'react';
-import {characterCategories, CharacterProps} from '@/lib/models/Character';
+import {CharacterProps} from '@/lib/types/character';
+import {characterCategories} from '@/lib/constants/character';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import CollapsableArea from '@/components/CollapsableArea';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronRight, faPlus, faUser} from '@fortawesome/free-solid-svg-icons';
-import {SelectBoxProps} from '@/shared/interface';
-import {useTranslations} from 'next-intl';
+import Collapse from '@/components/ui/Collapse';
+import {Plus, User} from 'lucide-react';
+import EntityListItem from '@/components/ui/EntityListItem';
+import AvatarIcon from '@/components/ui/AvatarIcon';
+import {SelectBoxProps} from '@/components/form/SelectBox';
+import {useTranslations} from '@/lib/i18n';
+import EmptyState from '@/components/ui/EmptyState';
 
 interface CharacterSettingsListProps {
     characters: CharacterProps[];
@@ -21,22 +24,22 @@ interface CharacterSettingsListProps {
  * PAS de scroll interne (géré par parent SettingsContainer)
  */
 export default function CharacterSettingsList({
-    characters,
-    onCharacterClick,
-    onAddCharacter,
-}: CharacterSettingsListProps): React.JSX.Element {
+                                                  characters,
+                                                  onCharacterClick,
+                                                  onAddCharacter,
+                                              }: CharacterSettingsListProps): React.JSX.Element {
     const t = useTranslations();
     const [searchQuery, setSearchQuery] = useState<string>('');
-
+    
     function getFilteredCharacters(): CharacterProps[] {
         return characters.filter(function (char: CharacterProps): boolean {
             return char.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                 (char.lastName?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false);
         });
     }
-
+    
     const filteredCharacters: CharacterProps[] = getFilteredCharacters();
-
+    
     return (
         <div className="space-y-4">
             <div className="px-4 mb-4">
@@ -50,14 +53,14 @@ export default function CharacterSettingsList({
                             placeholder={t('characterList.search')}
                         />
                     }
-                    actionIcon={faPlus}
+                    actionIcon={Plus}
                     actionLabel={t('characterList.add')}
                     addButtonCallBack={async function (): Promise<void> {
                         onAddCharacter();
                     }}
                 />
             </div>
-
+            
             <div className="px-2">
                 {characterCategories.map(function (category: SelectBoxProps): React.JSX.Element | null {
                     const categoryCharacters: CharacterProps[] = filteredCharacters.filter(
@@ -65,85 +68,57 @@ export default function CharacterSettingsList({
                             return char.category === category.value;
                         }
                     );
-
+                    
                     if (categoryCharacters.length === 0) {
                         return null;
                     }
-
+                    
                     return (
-                        <CollapsableArea
+                        <Collapse variant="card"
                             key={category.value}
                             title={t(category.label)}
-                            icon={faUser}
+                                  icon={User}
                         >
                             <div className="space-y-2 p-2">
                                 {categoryCharacters.map(function (char: CharacterProps): React.JSX.Element {
                                     return (
-                                        <div
+                                        <EntityListItem
                                             key={char.id}
+                                            variant="transparent"
                                             onClick={function (): void {
                                                 onCharacterClick(char);
                                             }}
-                                            className="group flex items-center p-4 bg-secondary/30 rounded-xl border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md hover:scale-102 transition-all duration-200 hover:border-primary/50"
-                                        >
-                                            <div className="w-14 h-14 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-md group-hover:scale-110 transition-transform">
-                                                {char.image ? (
-                                                    <img
-                                                        src={char.image}
-                                                        alt={char.name}
-                                                        className="w-full h-full object-cover"
-                                                    />
-                                                ) : (
-                                                    <div className="w-full h-full flex items-center justify-center bg-primary/10 text-primary font-bold text-lg">
-                                                        {char.name?.charAt(0)?.toUpperCase() || '?'}
-                                                    </div>
-                                                )}
-                                            </div>
-
-                                            <div className="ml-4 flex-1">
-                                                <div className="text-text-primary font-bold text-base group-hover:text-primary transition-colors">
-                                                    {char.name || t('characterList.unknown')}
-                                                </div>
-                                                <div className="text-text-secondary text-sm mt-0.5">
-                                                    {char.lastName || t('characterList.noLastName')}
-                                                </div>
-                                            </div>
-
-                                            <div className="w-28 px-3">
-                                                <div className="text-primary text-sm font-semibold truncate">
-                                                    {char.title || t('characterList.noTitle')}
-                                                </div>
-                                                <div className="text-muted text-xs truncate mt-0.5">
-                                                    {char.role || t('characterList.noRole')}
-                                                </div>
-                                            </div>
-
-                                            <div className="w-8 flex justify-center">
-                                                <FontAwesomeIcon
-                                                    icon={faChevronRight}
-                                                    className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-4 h-4"
+                                            avatar={
+                                                <AvatarIcon
+                                                    size="lg"
+                                                    image={char.image}
+                                                    initial={char.name?.charAt(0)?.toUpperCase() || '?'}
+                                                    alt={char.name}
                                                 />
-                                            </div>
-                                        </div>
+                                            }
+                                            title={char.name || t('characterList.unknown')}
+                                            subtitle={char.lastName || t('characterList.noLastName')}
+                                            extra={
+                                                <div className="w-28">
+                                                    <div className="text-primary text-sm font-semibold truncate">
+                                                        {char.title || t('characterList.noTitle')}
+                                                    </div>
+                                                    <div className="text-muted text-xs truncate mt-0.5">
+                                                        {char.role || t('characterList.noRole')}
+                                                    </div>
+                                                </div>
+                                            }
+                                        />
                                     );
                                 })}
                             </div>
-                        </CollapsableArea>
+                        </Collapse>
                     );
                 })}
-
+                
                 {filteredCharacters.length === 0 && (
-                    <div className="flex flex-col items-center justify-center py-12 text-center">
-                        <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-4">
-                            <FontAwesomeIcon icon={faUser} className="text-primary w-10 h-10"/>
-                        </div>
-                        <h3 className="text-text-primary font-semibold text-lg mb-2">
-                            {t('characterList.noCharacters')}
-                        </h3>
-                        <p className="text-muted text-sm max-w-xs">
-                            {t('characterList.noCharactersDescription')}
-                        </p>
-                    </div>
+                    <EmptyState icon={User} title={t('characterList.noCharacters')}
+                                description={t('characterList.noCharactersDescription')}/>
                 )}
             </div>
         </div>
diff --git a/components/book/settings/goals/page.tsx b/components/book/settings/goals/page.tsx
index f3a5f01..f7cf16f 100644
--- a/components/book/settings/goals/page.tsx
+++ b/components/book/settings/goals/page.tsx
@@ -1,181 +1,176 @@
-'use client'
-import {useState} from 'react';
-
-interface TimeGoal {
-    desiredReleaseDate: string;
-    maxReleaseDate: string;
-}
-
-interface NumbersGoal {
-    minWordsCount: number;
-    maxWordsCount: number;
-    desiredWordsCountByChapter: number;
-    desiredChapterCount: number;
-}
-
-interface Goal {
-    id: number;
-    name: string;
-    timeGoal: TimeGoal;
-    numbersGoal: NumbersGoal;
-}
-
-export default function GoalsPage() {
-    const [goals, setGoals] = useState<Goal[]>([
-        {
-            id: 1,
-            name: 'First Goal',
-            timeGoal: {
-                desiredReleaseDate: '',
-                maxReleaseDate: '',
-            },
-            numbersGoal: {
-                minWordsCount: 0,
-                maxWordsCount: 0,
-                desiredWordsCountByChapter: 0,
-                desiredChapterCount: 0,
-            },
-        },
-    ]);
-
-    const [selectedGoalIndex, setSelectedGoalIndex] = useState(0);
-    const [newGoalName, setNewGoalName] = useState('');
-
-    const handleAddGoal = () => {
-        const newGoal: Goal = {
-            id: goals.length + 1,
-            name: newGoalName,
-            timeGoal: {
-                desiredReleaseDate: '',
-                maxReleaseDate: '',
-            },
-            numbersGoal: {
-                minWordsCount: 0,
-                maxWordsCount: 0,
-                desiredWordsCountByChapter: 0,
-                desiredChapterCount: 0,
-            },
-        };
-        setGoals([...goals, newGoal]);
-        setNewGoalName('');
-    };
-
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, field: keyof Goal, subField?: keyof TimeGoal | keyof NumbersGoal) => {
-        const updatedGoals = [...goals];
-        if (subField) {
-            if (field === 'timeGoal' && subField in updatedGoals[selectedGoalIndex].timeGoal) {
-                (updatedGoals[selectedGoalIndex].timeGoal[subField as keyof TimeGoal] as string) = e.target.value;
-            } else if (field === 'numbersGoal' && subField in updatedGoals[selectedGoalIndex].numbersGoal) {
-                (updatedGoals[selectedGoalIndex].numbersGoal[subField as keyof NumbersGoal] as number) = Number(e.target.value);
-            }
-        } else {
-            (updatedGoals[selectedGoalIndex][field] as string) = e.target.value;
-        }
-        setGoals(updatedGoals);
-    };
-
-    return (
-        <main className="flex-grow p-8 overflow-y-auto">
-            <section id="goals">
-                <h2 className="text-4xl font-['ADLaM_Display'] text-text-primary mb-6">Goals</h2>
-                <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-6 shadow-lg mb-6">
-                    <div className="flex space-x-4 items-center">
-                        <select
-                            className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                            value={selectedGoalIndex}
-                            onChange={(e) => setSelectedGoalIndex(parseInt(e.target.value))}
-                        >
-                            {goals.map((goal, index) => (
-                                <option key={goal.id} value={index}>{goal.name}</option>
-                            ))}
-                        </select>
-                        <input
-                            type="text"
-                            value={newGoalName}
-                            onChange={(e) => setNewGoalName(e.target.value)}
-                            className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                            placeholder="New Goal Name"
-                        />
-                        <button
-                            type="button"
-                            onClick={handleAddGoal}
-                            className="bg-primary hover:bg-primary-dark text-text-primary font-semibold py-2.5 px-5 rounded-xl shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200"
-                        >
-                            Add Goal
-                        </button>
-                    </div>
-                </div>
-                
-                <h2 className="text-3xl font-['ADLaM_Display'] text-text-primary mb-6">{goals[selectedGoalIndex].name}</h2>
-                <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-6 shadow-lg mb-6">
-                    <h3 className="text-2xl font-bold text-text-primary mb-4">Time Goal</h3>
-                    <label className="block text-text-primary font-medium mb-2" htmlFor="desiredReleaseDate">Desired
-                        Release Date</label>
-                    <input
-                        type="date"
-                        id="desiredReleaseDate"
-                        value={goals[selectedGoalIndex].timeGoal.desiredReleaseDate}
-                        onChange={(e) => handleInputChange(e, 'timeGoal', 'desiredReleaseDate')}
-                        className="w-full p-2 rounded-lg bg-gray-800 text-white border-none outline-none"
-                    />
-                    <label className="block text-white mb-2 mt-4" htmlFor="maxReleaseDate">Max Release Date</label>
-                    <input
-                        type="date"
-                        id="maxReleaseDate"
-                        value={goals[selectedGoalIndex].timeGoal.maxReleaseDate}
-                        onChange={(e) => handleInputChange(e, 'timeGoal', 'maxReleaseDate')}
-                        className="w-full p-2 rounded-lg bg-gray-800 text-white border-none outline-none"
-                    />
-                </div>
-                
-                <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-6 shadow-lg mb-6">
-                    <h3 className="text-2xl font-bold text-text-primary mb-4">Numbers Goal</h3>
-                    <label className="block text-text-primary font-medium mb-2" htmlFor="minWordsCount">Min Words
-                        Count</label>
-                    <input
-                        type="number"
-                        id="minWordsCount"
-                        value={goals[selectedGoalIndex].numbersGoal.minWordsCount}
-                        onChange={(e) => handleInputChange(e, 'numbersGoal', 'minWordsCount')}
-                        className="w-full p-2 rounded-lg bg-gray-800 text-white border-none outline-none"
-                    />
-                    <label className="block text-white mb-2 mt-4" htmlFor="maxWordsCount">Max Words Count</label>
-                    <input
-                        type="number"
-                        id="maxWordsCount"
-                        value={goals[selectedGoalIndex].numbersGoal.maxWordsCount}
-                        onChange={(e) => handleInputChange(e, 'numbersGoal', 'maxWordsCount')}
-                        className="w-full p-2 rounded-lg bg-gray-800 text-white border-none outline-none"
-                    />
-                    <label className="block text-white mb-2 mt-4" htmlFor="desiredWordsCountByChapter">Desired Words
-                        Count by Chapter</label>
-                    <input
-                        type="number"
-                        id="desiredWordsCountByChapter"
-                        value={goals[selectedGoalIndex].numbersGoal.desiredWordsCountByChapter}
-                        onChange={(e) => handleInputChange(e, 'numbersGoal', 'desiredWordsCountByChapter')}
-                        className="w-full p-2 rounded-lg bg-gray-800 text-white border-none outline-none"
-                    />
-                    <label className="block text-white mb-2 mt-4" htmlFor="desiredChapterCount">Desired Chapter
-                        Count</label>
-                    <input
-                        type="number"
-                        id="desiredChapterCount"
-                        value={goals[selectedGoalIndex].numbersGoal.desiredChapterCount}
-                        onChange={(e) => handleInputChange(e, 'numbersGoal', 'desiredChapterCount')}
-                        className="w-full p-2 rounded-lg bg-gray-800 text-white border-none outline-none"
-                    />
-                </div>
-
-                <div className="text-center mt-8">
-                    <button
-                        type="button"
-                        className="bg-primary hover:bg-primary-dark text-text-primary font-semibold py-2.5 px-6 rounded-xl shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200"
-                    >
-                        Update
-                    </button>
-                </div>
-            </section>
-        </main>
-    );
-}
+'use client'
+import {useState} from 'react';
+import {Plus, Save} from 'lucide-react';
+import Button from '@/components/ui/Button';
+
+interface TimeGoal {
+    desiredReleaseDate: string;
+    maxReleaseDate: string;
+}
+
+interface NumbersGoal {
+    minWordsCount: number;
+    maxWordsCount: number;
+    desiredWordsCountByChapter: number;
+    desiredChapterCount: number;
+}
+
+interface Goal {
+    id: number;
+    name: string;
+    timeGoal: TimeGoal;
+    numbersGoal: NumbersGoal;
+}
+
+export default function GoalsPage() {
+    const [goals, setGoals] = useState<Goal[]>([
+        {
+            id: 1,
+            name: 'First Goal',
+            timeGoal: {
+                desiredReleaseDate: '',
+                maxReleaseDate: '',
+            },
+            numbersGoal: {
+                minWordsCount: 0,
+                maxWordsCount: 0,
+                desiredWordsCountByChapter: 0,
+                desiredChapterCount: 0,
+            },
+        },
+    ]);
+
+    const [selectedGoalIndex, setSelectedGoalIndex] = useState(0);
+    const [newGoalName, setNewGoalName] = useState('');
+
+    const handleAddGoal = () => {
+        const newGoal: Goal = {
+            id: goals.length + 1,
+            name: newGoalName,
+            timeGoal: {
+                desiredReleaseDate: '',
+                maxReleaseDate: '',
+            },
+            numbersGoal: {
+                minWordsCount: 0,
+                maxWordsCount: 0,
+                desiredWordsCountByChapter: 0,
+                desiredChapterCount: 0,
+            },
+        };
+        setGoals([...goals, newGoal]);
+        setNewGoalName('');
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, field: keyof Goal, subField?: keyof TimeGoal | keyof NumbersGoal) => {
+        const updatedGoals = [...goals];
+        if (subField) {
+            if (field === 'timeGoal' && subField in updatedGoals[selectedGoalIndex].timeGoal) {
+                (updatedGoals[selectedGoalIndex].timeGoal[subField as keyof TimeGoal] as string) = e.target.value;
+            } else if (field === 'numbersGoal' && subField in updatedGoals[selectedGoalIndex].numbersGoal) {
+                (updatedGoals[selectedGoalIndex].numbersGoal[subField as keyof NumbersGoal] as number) = Number(e.target.value);
+            }
+        } else {
+            (updatedGoals[selectedGoalIndex][field] as string) = e.target.value;
+        }
+        setGoals(updatedGoals);
+    };
+
+    return (
+        <main className="flex-grow p-8 overflow-y-auto">
+            <section id="goals">
+                <h2 className="text-4xl font-['ADLaM_Display'] text-text-primary mb-6">Goals</h2>
+                <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-6 shadow-lg mb-6">
+                    <div className="flex space-x-4 items-center">
+                        <select
+                            className="input-base"
+                            value={selectedGoalIndex}
+                            onChange={(e) => setSelectedGoalIndex(parseInt(e.target.value))}
+                        >
+                            {goals.map((goal, index) => (
+                                <option key={goal.id} value={index}>{goal.name}</option>
+                            ))}
+                        </select>
+                        <input
+                            type="text"
+                            value={newGoalName}
+                            onChange={(e) => setNewGoalName(e.target.value)}
+                            className="input-base"
+                            placeholder="New Goal Name"
+                        />
+                        <Button variant="primary" icon={Plus} onClick={handleAddGoal}>
+                            Add Goal
+                        </Button>
+                    </div>
+                </div>
+
+                <h2 className="text-3xl font-['ADLaM_Display'] text-text-primary mb-6">{goals[selectedGoalIndex].name}</h2>
+                <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-6 shadow-lg mb-6">
+                    <h3 className="text-2xl font-bold text-text-primary mb-4">Time Goal</h3>
+                    <label className="block text-text-primary font-medium mb-2" htmlFor="desiredReleaseDate">Desired
+                        Release Date</label>
+                    <input
+                        type="date"
+                        id="desiredReleaseDate"
+                        value={goals[selectedGoalIndex].timeGoal.desiredReleaseDate}
+                        onChange={(e) => handleInputChange(e, 'timeGoal', 'desiredReleaseDate')}
+                        className="input-base"
+                    />
+                    <label className="block text-text-primary mb-2 mt-4" htmlFor="maxReleaseDate">Max Release Date</label>
+                    <input
+                        type="date"
+                        id="maxReleaseDate"
+                        value={goals[selectedGoalIndex].timeGoal.maxReleaseDate}
+                        onChange={(e) => handleInputChange(e, 'timeGoal', 'maxReleaseDate')}
+                        className="input-base"
+                    />
+                </div>
+
+                <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-6 shadow-lg mb-6">
+                    <h3 className="text-2xl font-bold text-text-primary mb-4">Numbers Goal</h3>
+                    <label className="block text-text-primary font-medium mb-2" htmlFor="minWordsCount">Min Words
+                        Count</label>
+                    <input
+                        type="number"
+                        id="minWordsCount"
+                        value={goals[selectedGoalIndex].numbersGoal.minWordsCount}
+                        onChange={(e) => handleInputChange(e, 'numbersGoal', 'minWordsCount')}
+                        className="input-base"
+                    />
+                    <label className="block text-text-primary mb-2 mt-4" htmlFor="maxWordsCount">Max Words Count</label>
+                    <input
+                        type="number"
+                        id="maxWordsCount"
+                        value={goals[selectedGoalIndex].numbersGoal.maxWordsCount}
+                        onChange={(e) => handleInputChange(e, 'numbersGoal', 'maxWordsCount')}
+                        className="input-base"
+                    />
+                    <label className="block text-text-primary mb-2 mt-4" htmlFor="desiredWordsCountByChapter">Desired Words
+                        Count by Chapter</label>
+                    <input
+                        type="number"
+                        id="desiredWordsCountByChapter"
+                        value={goals[selectedGoalIndex].numbersGoal.desiredWordsCountByChapter}
+                        onChange={(e) => handleInputChange(e, 'numbersGoal', 'desiredWordsCountByChapter')}
+                        className="input-base"
+                    />
+                    <label className="block text-text-primary mb-2 mt-4" htmlFor="desiredChapterCount">Desired Chapter
+                        Count</label>
+                    <input
+                        type="number"
+                        id="desiredChapterCount"
+                        value={goals[selectedGoalIndex].numbersGoal.desiredChapterCount}
+                        onChange={(e) => handleInputChange(e, 'numbersGoal', 'desiredChapterCount')}
+                        className="input-base"
+                    />
+                </div>
+
+                <div className="text-center mt-8">
+                    <Button variant="primary" icon={Save}>
+                        Update
+                    </Button>
+                </div>
+            </section>
+        </main>
+    );
+}
diff --git a/components/book/settings/guide-line/GuideLineSetting.tsx b/components/book/settings/guide-line/GuideLineSetting.tsx
deleted file mode 100644
index ef1e9e5..0000000
--- a/components/book/settings/guide-line/GuideLineSetting.tsx
+++ /dev/null
@@ -1,457 +0,0 @@
-'use client'
-import * as tauri from '@/lib/tauri';
-import {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
-import System from '@/lib/models/System';
-import {AlertContext} from "@/context/AlertContext";
-import {BookContext} from '@/context/BookContext';
-import {SessionContext} from "@/context/SessionContext";
-import {GuideLine, GuideLineAI} from "@/lib/models/Book";
-import TexteAreaInput from "@/components/form/TexteAreaInput";
-import InputField from "@/components/form/InputField";
-import TextInput from "@/components/form/TextInput";
-import SelectBox from "@/components/form/SelectBox";
-import {
-    advancedDialogueTypes,
-    advancedNarrativePersons,
-    beginnerDialogueTypes,
-    beginnerNarrativePersons,
-    intermediateDialogueTypes,
-    intermediateNarrativePersons,
-    langues,
-    verbalTime
-} from "@/lib/models/Story";
-import {useTranslations} from "next-intl";
-import {LangContext} from "@/context/LangContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
-
-function GuideLineSetting(props: any, ref: any) {
-    const t = useTranslations();
-    const {lang} = useContext(LangContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {book} = useContext(BookContext);
-    const {session} = useContext(SessionContext);
-    const userToken: string = session?.accessToken ? session?.accessToken : '';
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const bookId = book?.bookId as string;
-    const [activeTab, setActiveTab] = useState('personal');
-    const authorLevel: string = session.user?.writingLevel?.toString() ?? '1';
-    
-    const [tone, setTone] = useState<string>('');
-    const [atmosphere, setAtmosphere] = useState<string>('');
-    const [writingStyle, setWritingStyle] = useState<string>('');
-    const [themes, setThemes] = useState<string>('');
-    const [symbolism, setSymbolism] = useState<string>('');
-    const [motifs, setMotifs] = useState<string>('');
-    const [narrativeVoice, setNarrativeVoice] = useState<string>('');
-    const [pacing, setPacing] = useState<string>('');
-    const [intendedAudience, setIntendedAudience] = useState<string>('');
-    const [keyMessages, setKeyMessages] = useState<string>('');
-    
-    const [plotSummary, setPlotSummary] = useState<string>('');
-    const [narrativeType, setNarrativeType] = useState<string>('');
-    const [verbTense, setVerbTense] = useState<string>('');
-    const [dialogueType, setDialogueType] = useState<string>('');
-    const [toneAtmosphere, setToneAtmosphere] = useState<string>('');
-    const [language, setLanguage] = useState<string>('');
-    
-    useEffect((): void => {
-        if (activeTab === 'personal') {
-            getGuideLine().then();
-        } else {
-            getAIGuideLine().then();
-        }
-    }, [activeTab]);
-    
-    useImperativeHandle(ref, () => {
-        {
-            if (activeTab === 'personal') {
-                return {
-                    handleSave: savePersonal
-                };
-            } else {
-                return {
-                    handleSave: saveQuillSense
-                };
-            }
-        }
-    });
-    
-    async function getAIGuideLine(): Promise<void> {
-        try {
-            let response: GuideLineAI;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getAIGuideLine(bookId);
-            } else {
-                response = await System.authGetQueryToServer<GuideLineAI>(`book/ai/guideline`, userToken, lang, {id: bookId});
-            }
-            if (response) {
-                setPlotSummary(response.globalResume || '');
-                setVerbTense(response.verbeTense?.toString() || '');
-                setNarrativeType(response.narrativeType?.toString() || '');
-                setDialogueType(response.dialogueType?.toString() || '');
-                setToneAtmosphere(response.atmosphere || '');
-                setLanguage(response.langue?.toString() || '');
-                setThemes(response.themes || '');
-            }
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t("guideLineSetting.errorUnknown"));
-            }
-        }
-    }
-    
-    async function getGuideLine(): Promise<void> {
-        try {
-            let response: GuideLine;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getGuideLine(bookId);
-            } else {
-                response = await System.authGetQueryToServer<GuideLine>(
-                    `book/guide-line`,
-                    userToken,
-                    lang,
-                    {id: bookId},
-                );
-            }
-            if (response) {
-                setTone(response.tone);
-                setAtmosphere(response.atmosphere);
-                setWritingStyle(response.writingStyle);
-                setThemes(response.themes);
-                setSymbolism(response.symbolism);
-                setMotifs(response.motifs);
-                setNarrativeVoice(response.narrativeVoice);
-                setPacing(response.pacing);
-                setIntendedAudience(response.intendedAudience);
-                setKeyMessages(response.keyMessages);
-            }
-        } catch (error: unknown) {
-            if (error instanceof Error) {
-                errorMessage(error.message);
-            } else {
-                errorMessage(t("guideLineSetting.errorUnknown"));
-            }
-        }
-    }
-    
-    async function savePersonal(): Promise<void> {
-        try {
-            let response: boolean;
-            const guidelineData = {
-                bookId: bookId,
-                tone: tone,
-                atmosphere: atmosphere,
-                writingStyle: writingStyle,
-                themes: themes,
-                symbolism: symbolism,
-                motifs: motifs,
-                narrativeVoice: narrativeVoice,
-                pacing: pacing,
-                intendedAudience: intendedAudience,
-                keyMessages: keyMessages,
-            };
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.updateGuideLine(guidelineData);
-            } else {
-                response = await System.authPostToServer<boolean>(
-                    'book/guide-line',
-                    guidelineData,
-                    userToken,
-                    lang,
-                );
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('update_guideline', {data: guidelineData});
-                }
-            }
-            if (!response) {
-                errorMessage(t("guideLineSetting.saveError"));
-                return;
-            }
-            successMessage(t("guideLineSetting.saveSuccess"));
-        } catch (error: unknown) {
-            if (error instanceof Error) {
-                errorMessage(error.message);
-            } else {
-                errorMessage(t("guideLineSetting.errorUnknown"));
-            }
-        }
-    }
-    
-    async function saveQuillSense(): Promise<void> {
-        try {
-            let response: boolean;
-            const aiGuidelineData = {
-                bookId: bookId,
-                plotSummary: plotSummary,
-                verbTense: verbTense,
-                narrativeType: narrativeType,
-                dialogueType: dialogueType,
-                toneAtmosphere: toneAtmosphere,
-                language: language,
-                themes: themes,
-            };
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.updateAIGuideLine(aiGuidelineData);
-            } else {
-                response = await System.authPostToServer<boolean>(
-                    'quillsense/book/guide-line',
-                    aiGuidelineData,
-                    userToken,
-                    lang,
-                );
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('update_ai_guideline', {data: aiGuidelineData});
-                }
-            }
-            if (response) {
-                successMessage(t("guideLineSetting.saveSuccess"));
-            } else {
-                errorMessage(t("guideLineSetting.saveError"));
-            }
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t("guideLineSetting.errorUnknown"));
-            }
-        }
-    }
-    
-    return (
-        <div className="space-y-6">
-            <div className="flex gap-2 border-b border-secondary/50 mb-6">
-                <button
-                    className={`px-5 py-2.5 font-medium rounded-t-xl transition-all duration-200 ${
-                        activeTab === 'personal'
-                            ? 'border-b-2 border-primary text-primary bg-primary/10 shadow-md'
-                            : 'text-text-secondary hover:text-text-primary hover:bg-secondary/30'
-                    }`}
-                    onClick={(): void => setActiveTab('personal')}
-                >
-                    {t("guideLineSetting.personal")}
-                </button>
-                <button
-                    className={`px-5 py-2.5 font-medium rounded-t-xl transition-all duration-200 ${
-                        activeTab === 'quillsense'
-                            ? 'border-b-2 border-primary text-primary bg-primary/10 shadow-md'
-                            : 'text-text-secondary hover:text-text-primary hover:bg-secondary/30'
-                    }`}
-                    onClick={() => setActiveTab('quillsense')}
-                >
-                    {t("guideLineSetting.quillsense")}
-                </button>
-            </div>
-            
-            {activeTab === 'personal' && (
-                <div className="space-y-4">
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.tone")} input={
-                            <TexteAreaInput
-                                value={tone}
-                                setValue={(e: ChangeEvent<HTMLTextAreaElement>) => setTone(e.target.value)}
-                                placeholder={t("guideLineSetting.tonePlaceholder")}
-                            />
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.atmosphere")} input={
-                            <TexteAreaInput
-                                value={atmosphere}
-                                setValue={(e: ChangeEvent<HTMLTextAreaElement>) => setAtmosphere(e.target.value)}
-                                placeholder={t("guideLineSetting.atmospherePlaceholder")}
-                            />
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.writingStyle")} input={
-                            <TexteAreaInput
-                                value={writingStyle}
-                                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setWritingStyle(e.target.value)}
-                                placeholder={t("guideLineSetting.writingStylePlaceholder")}
-                            />
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.themes")} input={
-                            <TexteAreaInput
-                                value={themes}
-                                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setThemes(e.target.value)}
-                                placeholder={t("guideLineSetting.themesPlaceholder")}
-                            />
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.symbolism")} input={
-                            <TexteAreaInput
-                                value={symbolism}
-                                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setSymbolism(e.target.value)}
-                                placeholder={t("guideLineSetting.symbolismPlaceholder")}
-                            />
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.motifs")} input={
-                            <TexteAreaInput
-                                value={motifs}
-                                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setMotifs(e.target.value)}
-                                placeholder={t("guideLineSetting.motifsPlaceholder")}
-                            />
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.narrativeVoice")} input={
-                            <TexteAreaInput
-                                value={narrativeVoice}
-                                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setNarrativeVoice(e.target.value)}
-                                placeholder={t("guideLineSetting.narrativeVoicePlaceholder")}
-                            />
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.pacing")} input={
-                            <TexteAreaInput
-                                value={pacing}
-                                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setPacing(e.target.value)}
-                                placeholder={t("guideLineSetting.pacingPlaceholder")}
-                            />
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.intendedAudience")} input={
-                            <TexteAreaInput
-                                value={intendedAudience}
-                                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setIntendedAudience(e.target.value)}
-                                placeholder={t("guideLineSetting.intendedAudiencePlaceholder")}
-                            />
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.keyMessages")} input={
-                            <TexteAreaInput
-                                value={keyMessages}
-                                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setKeyMessages(e.target.value)}
-                                placeholder={t("guideLineSetting.keyMessagesPlaceholder")}
-                            />
-                        }/>
-                    </div>
-                </div>
-            )}
-            
-            {activeTab === 'quillsense' && (
-                <div className="space-y-4">
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.plotSummary")} input={
-                            <TexteAreaInput
-                                value={plotSummary}
-                                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setPlotSummary(e.target.value)}
-                                placeholder={t("guideLineSetting.plotSummaryPlaceholder")}
-                            />
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.toneAtmosphere")} input={
-                            <TextInput
-                                value={toneAtmosphere}
-                                setValue={(e: ChangeEvent<HTMLInputElement>): void => setToneAtmosphere(e.target.value)}
-                                placeholder={t("guideLineSetting.toneAtmospherePlaceholder")}
-                            />
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.themes")} input={
-                            <TextInput
-                                value={themes}
-                                setValue={(e: ChangeEvent<HTMLInputElement>) => setThemes(e.target.value)}
-                                placeholder={t("guideLineSetting.themesPlaceholderQuill")}
-                            />
-                        }/>
-                    </div>
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.verbTense")} input={
-                            <SelectBox
-                                defaultValue={verbTense}
-                                onChangeCallBack={(event: ChangeEvent<HTMLSelectElement>): void => setVerbTense(event.target.value)}
-                                data={verbalTime}
-                                placeholder={t("guideLineSetting.verbTensePlaceholder")}
-                            />
-                        }/>
-                    </div>
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.narrativeType")} input={
-                            <SelectBox defaultValue={narrativeType} data={
-                                authorLevel === '1'
-                                    ? beginnerNarrativePersons
-                                    : authorLevel === '2'
-                                        ? intermediateNarrativePersons
-                                        : advancedNarrativePersons
-                            } onChangeCallBack={(event: ChangeEvent<HTMLSelectElement>): void => {
-                                setNarrativeType(event.target.value)
-                            }} placeholder={t("guideLineSetting.narrativeTypePlaceholder")}/>
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.dialogueType")} input={
-                            <SelectBox defaultValue={dialogueType} data={authorLevel === '1'
-                                ? beginnerDialogueTypes
-                                : authorLevel === '2'
-                                    ? intermediateDialogueTypes
-                                    : advancedDialogueTypes}
-                                       onChangeCallBack={(event: ChangeEvent<HTMLSelectElement>) => {
-                                           setDialogueType(event.target.value)
-                                       }} placeholder={t("guideLineSetting.dialogueTypePlaceholder")}/>
-                        }/>
-                    </div>
-                    
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                        <InputField fieldName={t("guideLineSetting.language")} input={
-                            <SelectBox defaultValue={language} data={langues}
-                                       onChangeCallBack={(event: ChangeEvent<HTMLSelectElement>) => {
-                                           setLanguage(event.target.value)
-                                       }} placeholder={t("guideLineSetting.languagePlaceholder")}/>
-                        }/>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}
-
-export default forwardRef(GuideLineSetting);
\ No newline at end of file
diff --git a/components/book/settings/locations/LocationComponent.tsx b/components/book/settings/locations/LocationComponent.tsx
index 066749e..c9aaf47 100644
--- a/components/book/settings/locations/LocationComponent.tsx
+++ b/components/book/settings/locations/LocationComponent.tsx
@@ -1,27 +1,19 @@
 'use client'
-import {faMapMarkerAlt, faPlus, faShare, faToggleOn, faTrash} from '@fortawesome/free-solid-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {MapPin, Plus, Share2, ToggleRight, Trash2} from 'lucide-react';
 import React, {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
-import {SessionContext} from "@/context/SessionContext";
-import {AlertContext} from "@/context/AlertContext";
-import {BookContext} from "@/context/BookContext";
-import System from '@/lib/models/System';
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {apiDelete, apiGet, apiPatch, apiPost} from '@/lib/api/client';
 import InputField from "@/components/form/InputField";
 import TextInput from '@/components/form/TextInput';
-import TexteAreaInput from "@/components/form/TexteAreaInput";
-import {useTranslations} from "next-intl";
+import TextAreaInput from "@/components/form/TextAreaInput";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
-import {SeriesContext, SeriesContextProps} from "@/context/SeriesContext";
-import {SeriesSyncContext, SeriesSyncContextProps} from "@/context/SeriesSyncContext";
-import {SyncedSeries} from "@/lib/models/SyncedSeries";
 import ToggleSwitch from "@/components/form/ToggleSwitch";
-import {SeriesLocationElement, SeriesLocationItem, SeriesLocationSubElement} from "@/lib/models/Series";
+import {SeriesLocationElement, SeriesLocationItem, SeriesLocationSubElement} from "@/lib/types/series";
 import SeriesImportSelector from "@/components/form/SeriesImportSelector";
-import * as tauri from '@/lib/tauri';
+import IconButton from "@/components/ui/IconButton";
 
 interface SubElement {
     id: string;
@@ -57,16 +49,11 @@ interface LocationComponentProps {
 export function LocationComponent(props: LocationComponentProps, ref: React.Ref<{ handleSave: () => Promise<void> }>) {
     const {showToggle = true, entityType = 'book', entityId} = props;
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {session} = useContext(SessionContext);
-    const {successMessage, errorMessage} = useContext(AlertContext);
-    const {book, setBook} = useContext(BookContext);
-    const {seriesId, localSeries} = useContext<SeriesContextProps>(SeriesContext);
-    const {localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
-
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {successMessage, errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {book, setBook}: BookContextProps = useContext<BookContextProps>(BookContext);
+    
     const currentEntityId: string = entityId || book?.bookId || '';
     const isSeriesMode: boolean = entityType === 'series';
     const token: string = session.accessToken;
@@ -90,17 +77,17 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
             getAllLocations().then();
         }
     }, [currentEntityId]);
-
+    
     useEffect((): void => {
         if (bookSeriesId && !isSeriesMode) {
             getSeriesLocations().then();
         }
     }, [bookSeriesId]);
-
+    
     async function getSeriesLocations(): Promise<void> {
         if (!bookSeriesId) return;
         try {
-            const response: SeriesLocationItem[] = await System.authGetQueryToServer<SeriesLocationItem[]>(
+            const response: SeriesLocationItem[] = await apiGet<SeriesLocationItem[]>(
                 'series/location/list',
                 token,
                 lang,
@@ -111,7 +98,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
             }
         } catch (e: unknown) {
             if (e instanceof Error) {
-                console.error('Error loading series locations:', e.message);
+                errorMessage(e.message);
             }
         }
     }
@@ -119,31 +106,19 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
     async function handleToggleTool(enabled: boolean): Promise<void> {
         if (isSeriesMode) return;
         try {
-            let response: boolean;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.updateBookToolSetting(currentEntityId, 'locations', enabled);
-            } else {
-                response = await System.authPatchToServer<boolean>('book/tool-setting', {
-                    bookId: currentEntityId,
-                    toolName: 'locations',
-                    enabled: enabled
-                }, token, lang);
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
-                    addToQueue('update_book_tool_setting', {data: {
-                        bookId: currentEntityId,
-                        toolName: 'locations',
-                        enabled: enabled
-                    }});
-                }
-            }
+            const response: boolean = await apiPatch<boolean>('book/tool-setting', {
+                bookId: currentEntityId,
+                toolName: 'locations',
+                enabled: enabled
+            }, token, lang);
             if (response && setBook && book) {
                 setToolEnabled(enabled);
                 setBook({
                     ...book, tools: {
                         characters: book.tools?.characters ?? false,
                         worlds: book.tools?.worlds ?? false,
-                        spells: book.tools?.spells ?? false,
-                        locations: enabled
+                        locations: enabled,
+                        spells: book.tools?.spells ?? false
                     }
                 });
             }
@@ -157,17 +132,12 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
     async function getAllLocations(): Promise<void> {
         try {
             if (isSeriesMode) {
-                let response: SeriesLocationItem[];
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.getSeriesLocationList(currentEntityId) as SeriesLocationItem[];
-                } else {
-                    response = await System.authGetQueryToServer<SeriesLocationItem[]>(
-                        'series/location/list',
-                        token,
-                        lang,
-                        {seriesid: currentEntityId}
-                    );
-                }
+                const response: SeriesLocationItem[] = await apiGet<SeriesLocationItem[]>(
+                    'series/location/list',
+                    token,
+                    lang,
+                    {seriesid: currentEntityId}
+                );
                 if (response) {
                     const mappedLocations: LocationProps[] = response.map((loc: SeriesLocationItem): LocationProps => ({
                         id: loc.id,
@@ -186,14 +156,12 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
                     setSections(mappedLocations);
                 }
             } else {
-                let response: LocationListResponse;
-                if (isCurrentlyOffline() || book?.localBook) {
-                    response = await tauri.getAllLocations(currentEntityId, true) as LocationListResponse;
-                } else {
-                    response = await System.authGetQueryToServer<LocationListResponse>(`location/all`, token, lang, {
-                        bookid: currentEntityId,
-                    });
-                }
+                const response: LocationListResponse = await apiGet<LocationListResponse>(
+                    'location/all',
+                    token,
+                    lang,
+                    {bookid: currentEntityId}
+                );
                 if (response) {
                     setSections(response.locations);
                     setToolEnabled(response.enabled);
@@ -202,8 +170,8 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
                             ...book, tools: {
                                 characters: book.tools?.characters ?? false,
                                 worlds: book.tools?.worlds ?? false,
-                                spells: book.tools?.spells ?? false,
-                                locations: response.enabled
+                                locations: response.enabled,
+                                spells: book.tools?.spells ?? false
                             }
                         });
                     }
@@ -217,7 +185,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
             }
         }
     }
-
+    
     async function handleAddSection(): Promise<void> {
         if (!newSectionName.trim()) {
             errorMessage(t('locationComponent.errorSectionNameEmpty'))
@@ -226,47 +194,29 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
         try {
             let sectionId: string;
             if (isSeriesMode) {
-                const addData = {
-                    seriesId: currentEntityId,
-                    name: newSectionName,
-                };
-                if (isCurrentlyOffline() || localSeries) {
-                    sectionId = await tauri.addSeriesLocationSection(addData);
-                } else {
-                    sectionId = await System.authPostToServer<string>(
-                        'series/location/section/add',
-                        addData,
-                        token,
-                        lang
-                    );
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                        addToQueue('add_series_location_section', {data: addData});
-                    }
-                }
+                sectionId = await apiPost<string>(
+                    'series/location/section/add',
+                    {
+                        seriesId: currentEntityId,
+                        name: newSectionName,
+                    },
+                    token,
+                    lang
+                );
                 if (!sectionId) {
                     errorMessage(t('locationComponent.errorUnknownAddSection'));
                     return;
                 }
-            } else if (isCurrentlyOffline() || book?.localBook) {
-                sectionId = await tauri.addLocationSection(newSectionName, currentEntityId);
             } else {
-                sectionId = await System.authPostToServer<string>(`location/section/add`, {
+                sectionId = await apiPost<string>('location/section/add', {
                     bookId: currentEntityId,
                     locationName: newSectionName,
                 }, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
-                    addToQueue('add_location_section', {data: {
-                        bookId: currentEntityId,
-                        sectionId,
-                        locationName: newSectionName,
-                    }});
+                if (!sectionId) {
+                    errorMessage(t('locationComponent.errorUnknownAddSection'));
+                    return;
                 }
             }
-            if (!sectionId) {
-                errorMessage(t('locationComponent.errorUnknownAddSection'));
-                return;
-            }
             const newLocation: LocationProps = {
                 id: sectionId,
                 name: newSectionName,
@@ -291,50 +241,30 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
         try {
             let elementId: string;
             if (isSeriesMode) {
-                const addData = {
-                    locationId: sectionId,
-                    name: newElementNames[sectionId],
-                };
-                if (isCurrentlyOffline() || localSeries) {
-                    elementId = await tauri.addSeriesLocationElement(addData);
-                } else {
-                    elementId = await System.authPostToServer<string>(
-                        'series/location/element/add',
-                        addData,
-                        token,
-                        lang
-                    );
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                        addToQueue('add_series_location_element', {data: addData});
-                    }
-                }
+                elementId = await apiPost<string>(
+                    'series/location/element/add',
+                    {
+                        locationId: sectionId,
+                        name: newElementNames[sectionId],
+                    },
+                    token,
+                    lang
+                );
                 if (!elementId) {
                     errorMessage(t('locationComponent.errorUnknownAddElement'));
                     return;
                 }
-            } else if (isCurrentlyOffline() || book?.localBook) {
-                elementId = await tauri.addLocationElement(sectionId, newElementNames[sectionId]);
             } else {
-                elementId = await System.authPostToServer<string>(`location/element/add`, {
-                        bookId: currentEntityId,
-                        locationId: sectionId,
-                        elementName: newElementNames[sectionId],
-                    },
-                    token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
-                    addToQueue('add_location_element', {data: {
-                        bookId: currentEntityId,
-                        locationId: sectionId,
-                        elementId,
-                        elementName: newElementNames[sectionId],
-                    }});
+                elementId = await apiPost<string>('location/element/add', {
+                    bookId: currentEntityId,
+                    locationId: sectionId,
+                    elementName: newElementNames[sectionId],
+                }, token, lang);
+                if (!elementId) {
+                    errorMessage(t('locationComponent.errorUnknownAddElement'));
+                    return;
                 }
             }
-            if (!elementId) {
-                errorMessage(t('locationComponent.errorUnknownAddElement'));
-                return;
-            }
             const updatedSections: LocationProps[] = [...sections];
             const sectionIndex: number = updatedSections.findIndex(
                 (section: LocationProps): boolean => section.id === sectionId,
@@ -355,7 +285,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
             }
         }
     }
-
+    
     function handleElementChange(
         sectionId: string,
         elementIndex: number,
@@ -370,7 +300,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
         updatedSections[sectionIndex].elements[elementIndex][field] = value;
         setSections(updatedSections);
     }
-
+    
     async function handleAddSubElement(
         sectionId: string,
         elementIndex: number,
@@ -384,49 +314,30 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
         );
         try {
             let subElementId: string;
-            const elementId = sections[sectionIndex].elements[elementIndex].id;
             if (isSeriesMode) {
-                const addData = {
-                    elementId: elementId,
-                    name: newSubElementNames[elementIndex],
-                };
-                if (isCurrentlyOffline() || localSeries) {
-                    subElementId = await tauri.addSeriesLocationSubElement(addData);
-                } else {
-                    subElementId = await System.authPostToServer<string>(
-                        'series/location/sub-element/add',
-                        addData,
-                        token,
-                        lang
-                    );
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                        addToQueue('add_series_location_sub_element', {data: addData});
-                    }
-                }
+                subElementId = await apiPost<string>(
+                    'series/location/sub-element/add',
+                    {
+                        elementId: sections[sectionIndex].elements[elementIndex].id,
+                        name: newSubElementNames[elementIndex],
+                    },
+                    token,
+                    lang
+                );
                 if (!subElementId) {
                     errorMessage(t('locationComponent.errorUnknownAddSubElement'));
                     return;
                 }
-            } else if (isCurrentlyOffline() || book?.localBook) {
-                subElementId = await tauri.addLocationSubElement(elementId, newSubElementNames[elementIndex]);
             } else {
-                subElementId = await System.authPostToServer<string>(`location/sub-element/add`, {
-                    elementId: elementId,
+                subElementId = await apiPost<string>('location/sub-element/add', {
+                    elementId: sections[sectionIndex].elements[elementIndex].id,
                     subElementName: newSubElementNames[elementIndex],
                 }, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
-                    addToQueue('add_location_sub_element', {data: {
-                        elementId: elementId,
-                        subElementId,
-                        subElementName: newSubElementNames[elementIndex],
-                    }});
+                if (!subElementId) {
+                    errorMessage(t('locationComponent.errorUnknownAddSubElement'));
+                    return;
                 }
             }
-            if (!subElementId) {
-                errorMessage(t('locationComponent.errorUnknownAddSubElement'));
-                return;
-            }
             const updatedSections: LocationProps[] = [...sections];
             updatedSections[sectionIndex].elements[elementIndex].subElements.push({
                 id: subElementId,
@@ -460,45 +371,30 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
             ][field] = value;
         setSections(updatedSections);
     }
-
+    
     async function handleRemoveElement(
         sectionId: string,
         elementIndex: number,
     ): Promise<void> {
         try {
-            let response: boolean;
-            const elementId = sections.find((section: LocationProps): boolean => section.id === sectionId)
+            const elementId: string | undefined = sections.find((section: LocationProps): boolean => section.id === sectionId)
                 ?.elements[elementIndex].id;
-            const deletedAt: number = System.timeStampInSeconds();
+            let success: boolean;
             if (isSeriesMode) {
-                const deleteData = {elementId: elementId, deletedAt};
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.deleteSeriesLocationElement(deleteData.elementId!, deleteData.deletedAt);
-                } else {
-                    response = await System.authDeleteToServer<boolean>('series/location/element/delete', deleteData, token, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                        addToQueue('delete_series_location_element', {data: deleteData});
-                    }
-                }
-            } else if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.deleteLocationElement(elementId!, currentEntityId, deletedAt);
-            } else {
-                response = await System.authDeleteToServer<boolean>(`location/element/delete`, {
-                    elementId: elementId, bookId: currentEntityId, deletedAt,
+                success = await apiDelete<boolean>('series/location/element/delete', {
+                    elementId: elementId
+                }, token, lang);
+            } else {
+                success = await apiDelete<boolean>('location/element/delete', {
+                    elementId: elementId,
                 }, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
-                    addToQueue('delete_location_element', {data: {
-                        elementId: elementId, bookId: currentEntityId, deletedAt,
-                    }});
-                }
             }
-            if (!response) {
+            if (!success) {
                 errorMessage(t('locationComponent.errorUnknownDeleteElement'));
                 return;
             }
             const updatedSections: LocationProps[] = [...sections];
-            const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId,);
+            const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId);
             updatedSections[sectionIndex].elements.splice(elementIndex, 1);
             setSections(updatedSections);
         } catch (e: unknown) {
@@ -516,39 +412,25 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
         subElementIndex: number,
     ): Promise<void> {
         try {
-            let response: boolean;
-            const subElementId = sections.find((section: LocationProps): boolean => section.id === sectionId)?.elements[elementIndex].subElements[subElementIndex].id;
-            const deletedAt: number = System.timeStampInSeconds();
+            const subElementId: string | undefined = sections.find((section: LocationProps): boolean => section.id === sectionId)
+                ?.elements[elementIndex].subElements[subElementIndex].id;
+            let success: boolean;
             if (isSeriesMode) {
-                const deleteData = {subElementId: subElementId, deletedAt};
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.deleteSeriesLocationSubElement(deleteData.subElementId!, deleteData.deletedAt);
-                } else {
-                    response = await System.authDeleteToServer<boolean>('series/location/sub-element/delete', deleteData, token, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                        addToQueue('delete_series_location_sub_element', {data: deleteData});
-                    }
-                }
-            } else if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.deleteLocationSubElement(subElementId!, currentEntityId, deletedAt);
-            } else {
-                response = await System.authDeleteToServer<boolean>(`location/sub-element/delete`, {
-                    subElementId: subElementId, bookId: currentEntityId, deletedAt,
+                success = await apiDelete<boolean>('series/location/sub-element/delete', {
+                    subElementId: subElementId
+                }, token, lang);
+            } else {
+                success = await apiDelete<boolean>('location/sub-element/delete', {
+                    subElementId: subElementId,
                 }, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
-                    addToQueue('delete_location_sub_element', {data: {
-                        subElementId: subElementId, bookId: currentEntityId, deletedAt,
-                    }});
-                }
             }
-            if (!response) {
+            if (!success) {
                 errorMessage(t('locationComponent.errorUnknownDeleteSubElement'));
                 return;
             }
             const updatedSections: LocationProps[] = [...sections];
-            const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId,);
-            updatedSections[sectionIndex].elements[elementIndex].subElements.splice(subElementIndex, 1,);
+            const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId);
+            updatedSections[sectionIndex].elements[elementIndex].subElements.splice(subElementIndex, 1);
             setSections(updatedSections);
         } catch (e: unknown) {
             if (e instanceof Error) {
@@ -561,36 +443,21 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
 
     async function handleRemoveSection(sectionId: string): Promise<void> {
         try {
-            let response: boolean;
-            const deletedAt: number = System.timeStampInSeconds();
+            let success: boolean;
             if (isSeriesMode) {
-                const deleteData = {locationId: sectionId, deletedAt};
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.deleteSeriesLocation(deleteData.locationId, deleteData.deletedAt);
-                } else {
-                    response = await System.authDeleteToServer<boolean>('series/location/delete', deleteData, token, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                        addToQueue('delete_series_location', {data: deleteData});
-                    }
-                }
-            } else if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.deleteLocationSection(sectionId, currentEntityId, deletedAt);
-            } else {
-                response = await System.authDeleteToServer<boolean>(`location/delete`, {
-                    locationId: sectionId, bookId: currentEntityId, deletedAt,
+                success = await apiDelete<boolean>('series/location/delete', {
+                    locationId: sectionId
+                }, token, lang);
+            } else {
+                success = await apiDelete<boolean>('location/delete', {
+                    locationId: sectionId,
                 }, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
-                    addToQueue('delete_location_section', {data: {
-                        locationId: sectionId, bookId: currentEntityId, deletedAt,
-                    }});
-                }
             }
-            if (!response) {
+            if (!success) {
                 errorMessage(t('locationComponent.errorUnknownDeleteSection'));
                 return;
             }
-            const updatedSections: LocationProps[] = sections.filter((section: LocationProps): boolean => section.id !== sectionId,);
+            const updatedSections: LocationProps[] = sections.filter((section: LocationProps): boolean => section.id !== sectionId);
             setSections(updatedSections);
         } catch (e: unknown) {
             if (e instanceof Error) {
@@ -603,20 +470,9 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
 
     async function handleSave(): Promise<void> {
         try {
-            let response: boolean;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.updateLocations(sections) as boolean;
-            } else {
-                response = await System.authPostToServer<boolean>(`location/update`, {
-                    locations: sections,
-                }, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
-                    addToQueue('update_locations', {data: {
-                        locations: sections,
-                    }});
-                }
-            }
+            const response: boolean = await apiPost<boolean>(`location/update`, {
+                locations: sections,
+            }, token, lang);
             if (!response) {
                 errorMessage(t('locationComponent.errorUnknownSave'));
                 return;
@@ -630,23 +486,23 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
             }
         }
     }
-
+    
     async function handleExportToSeries(section: LocationProps): Promise<void> {
         if (!bookSeriesId) return;
-
+        
         try {
-            const seriesLocationId: string = await System.authPostToServer<string>('series/location/section/add', {
+            const seriesLocationId: string = await apiPost<string>('series/location/section/add', {
                 seriesId: bookSeriesId,
                 name: section.name,
             }, token, lang);
-
+            
             if (seriesLocationId) {
-                const updateResponse: boolean = await System.authPostToServer<boolean>('location/section/update', {
+                const updateResponse: boolean = await apiPost<boolean>('location/section/update', {
                     sectionId: section.id,
                     sectionName: section.name,
                     seriesLocationId: seriesLocationId,
                 }, token, lang);
-
+                
                 if (updateResponse) {
                     setSections(sections.map((s: LocationProps): LocationProps =>
                         s.id === section.id ? {...s, seriesLocationId: seriesLocationId} : s
@@ -661,42 +517,42 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
             }
         }
     }
-
+    
     async function handleImportFromSeries(seriesLocationId: string): Promise<void> {
         const seriesLocation: SeriesLocationItem | undefined = seriesLocations.find((location: SeriesLocationItem): boolean => location.id === seriesLocationId);
         if (!seriesLocation) return;
-
+        
         try {
-            const sectionId: string = await System.authPostToServer<string>('location/section/add', {
+            const sectionId: string = await apiPost<string>('location/section/add', {
                 bookId: currentEntityId,
                 locationName: seriesLocation.name,
                 seriesLocationId: seriesLocationId,
             }, token, lang);
-
+            
             if (!sectionId) {
                 errorMessage(t('locationComponent.importError'));
                 return;
             }
-
+            
             const importedElements: Element[] = [];
-
+            
             for (const seriesElement of seriesLocation.elements) {
-                const elementId: string = await System.authPostToServer<string>('location/element/add', {
+                const elementId: string = await apiPost<string>('location/element/add', {
                     bookId: currentEntityId,
                     locationId: sectionId,
                     elementName: seriesElement.name,
                 }, token, lang);
-
+                
                 if (!elementId) continue;
-
+                
                 const importedSubElements: SubElement[] = [];
-
+                
                 for (const seriesSubElement of seriesElement.subElements) {
-                    const subElementId: string = await System.authPostToServer<string>('location/sub-element/add', {
+                    const subElementId: string = await apiPost<string>('location/sub-element/add', {
                         elementId: elementId,
                         subElementName: seriesSubElement.name,
                     }, token, lang);
-
+                    
                     if (subElementId) {
                         importedSubElements.push({
                             id: subElementId,
@@ -705,7 +561,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
                         });
                     }
                 }
-
+                
                 importedElements.push({
                     id: elementId,
                     name: seriesElement.name,
@@ -713,7 +569,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
                     subElements: importedSubElements,
                 });
             }
-
+            
             const newLocation: LocationProps = {
                 id: sectionId,
                 name: seriesLocation.name,
@@ -732,9 +588,9 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
     return (
         <div className="space-y-6">
             {showToggle && !isSeriesMode && (
-                <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
+                <div className="bg-secondary rounded-xl p-4">
                     <InputField
-                        icon={faToggleOn}
+                        icon={ToggleRight}
                         fieldName={t('locationComponent.enableTool')}
                         input={
                             <ToggleSwitch
@@ -755,13 +611,15 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
                             <SeriesImportSelector
                                 availableItems={seriesLocations
                                     .filter((seriesLocation: SeriesLocationItem): boolean => !sections.some((section: LocationProps): boolean => section.seriesLocationId === seriesLocation.id))
-                                    .map((seriesLocation: SeriesLocationItem) => ({id: seriesLocation.id, name: seriesLocation.name}))}
+                                    .map((seriesLocation: SeriesLocationItem) => ({
+                                        id: seriesLocation.id,
+                                        name: seriesLocation.name
+                                    }))}
                                 onImport={handleImportFromSeries}
                                 placeholder={t("seriesImport.selectElement")}
                                 label={t("seriesImport.importFromSeries")}
                             />
                         )}
-                    <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
                         <div className="grid grid-cols-1 gap-4 mb-4">
                             <InputField
                                 input={
@@ -771,45 +629,37 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
                                         placeholder={t("locationComponent.newSectionPlaceholder")}
                                     />
                                 }
-                                actionIcon={faPlus}
+                                actionIcon={Plus}
                                 actionLabel={t("locationComponent.addSectionLabel")}
                                 addButtonCallBack={handleAddSection}
                             />
                         </div>
-                    </div>
 
                     {sections.length > 0 ? (
                         sections.map((section: LocationProps) => (
-                            <div key={section.id}
-                                 className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
+                            <div key={section.id} className="space-y-4">
                                 <h3 className="text-lg font-semibold text-text-primary mb-4 flex items-center">
-                                    <FontAwesomeIcon icon={faMapMarkerAlt} className="mr-2 w-5 h-5"/>
+                                    <MapPin className="mr-2 w-5 h-5" strokeWidth={1.75}/>
                                     {section.name}
                                     <span
-                                        className="ml-2 text-sm bg-dark-background text-text-secondary py-0.5 px-2 rounded-full">
+                                        className="ml-2 text-sm bg-secondary text-text-secondary py-0.5 px-2 rounded-full">
                                         {section.elements.length || 0}
                                     </span>
                                     <div className="ml-auto flex items-center gap-2">
                                         {!isSeriesMode && bookSeriesId && !section.seriesLocationId && (
-                                            <button
-                                                onClick={(): Promise<void> => handleExportToSeries(section)}
-                                                title={t("locationComponent.exportToSeries")}
-                                                className="bg-blue-500/90 text-text-primary rounded-full p-1.5 hover:bg-blue-500 transition-colors shadow-md"
-                                            >
-                                                <FontAwesomeIcon icon={faShare} className={'w-5 h-5'}/>
-                                            </button>
+                                            <IconButton icon={Share2} variant="ghost" size="sm" shape="square"
+                                                        tooltip={t("locationComponent.exportToSeries")}
+                                                        onClick={(): Promise<void> => handleExportToSeries(section)}/>
                                         )}
-                                        <button onClick={(): Promise<void> => handleRemoveSection(section.id)}
-                                                className="bg-dark-background text-text-primary rounded-full p-1.5 hover:bg-secondary transition-colors shadow-md">
-                                            <FontAwesomeIcon icon={faTrash} className={'w-5 h-5'}/>
-                                        </button>
+                                        <IconButton icon={Trash2} variant="danger" size="sm" shape="square"
+                                                    onClick={(): Promise<void> => handleRemoveSection(section.id)}/>
                                     </div>
                                 </h3>
                                 <div className="space-y-4">
                                     {section.elements.length > 0 ? (
                                         section.elements.map((element, elementIndex) => (
                                             <div key={element.id}
-                                                 className="bg-dark-background rounded-lg p-3 border-l-4 border-primary">
+                                                 className="bg-secondary rounded-lg p-3 border-l-4 border-primary">
                                                 <div className="mb-2">
                                                     <InputField
                                                         input={
@@ -824,17 +674,17 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
                                                         removeButtonCallBack={(): Promise<void> => handleRemoveElement(section.id, elementIndex)}
                                                     />
                                                 </div>
-                                                <TexteAreaInput
+                                                <TextAreaInput
                                                     value={element.description}
                                                     setValue={(e: React.ChangeEvent<HTMLTextAreaElement>): void => handleElementChange(section.id, elementIndex, 'description', e.target.value)}
                                                     placeholder={t("locationComponent.elementDescriptionPlaceholder")}
                                                 />
-
-                                                <div className="mt-4 pt-4 border-t border-secondary/50">
+                                                
+                                                <div className="mt-4 pt-4 border-t border-secondary">
                                                     {element.subElements.length > 0 && (
                                                         <h4 className="text-sm italic text-text-secondary mb-3">{t("locationComponent.subElementsHeading")}</h4>
                                                     )}
-
+                                                    
                                                     {element.subElements.map((subElement: SubElement, subElementIndex: number) => (
                                                         <div key={subElement.id}
                                                              className="bg-darkest-background rounded-lg p-3 mb-3">
@@ -852,7 +702,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
                                                                     removeButtonCallBack={(): Promise<void> => handleRemoveSubElement(section.id, elementIndex, subElementIndex)}
                                                                 />
                                                             </div>
-                                                            <TexteAreaInput
+                                                            <TextAreaInput
                                                                 value={subElement.description}
                                                                 setValue={(e) =>
                                                                     handleSubElementChange(section.id, elementIndex, subElementIndex, 'description', e.target.value)
@@ -861,7 +711,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
                                                             />
                                                         </div>
                                                     ))}
-
+                                                    
                                                     <InputField
                                                         input={
                                                             <TextInput
@@ -885,13 +735,16 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
                                             {t("locationComponent.noElementAvailable")}
                                         </div>
                                     )}
-
+                                    
                                     <InputField
                                         input={
                                             <TextInput
                                                 value={newElementNames[section.id] || ''}
                                                 setValue={(e: ChangeEvent<HTMLInputElement>) =>
-                                                    setNewElementNames({...newElementNames, [section.id]: e.target.value})
+                                                    setNewElementNames({
+                                                        ...newElementNames,
+                                                        [section.id]: e.target.value
+                                                    })
                                                 }
                                                 placeholder={t("locationComponent.newElementPlaceholder")}
                                             />
@@ -902,9 +755,8 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
                             </div>
                         ))
                     ) : (
-                        <div
-                            className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-8 border border-secondary/50 text-center">
-                            <p className="text-text-secondary mb-4">{t("locationComponent.noSectionAvailable")}</p>
+                        <div className="text-center py-8">
+                            <p className="text-text-secondary">{t("locationComponent.noSectionAvailable")}</p>
                         </div>
                     )}
                 </>
@@ -913,4 +765,4 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
     );
 }
 
-export default forwardRef(LocationComponent);
+export default forwardRef(LocationComponent);
\ No newline at end of file
diff --git a/components/book/settings/locations/editor/LocationEditor.tsx b/components/book/settings/locations/editor/LocationEditor.tsx
index f286521..a6a721c 100644
--- a/components/book/settings/locations/editor/LocationEditor.tsx
+++ b/components/book/settings/locations/editor/LocationEditor.tsx
@@ -1,16 +1,15 @@
 'use client';
 import React, {useCallback, useContext, useMemo, useState} from 'react';
-import {useLocations, UseLocationsConfig, LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
-import {useTranslations} from 'next-intl';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSpinner, faPlus, faToggleOn} from '@fortawesome/free-solid-svg-icons';
-import {BookContext} from '@/context/BookContext';
-import {SeriesLocationItem} from '@/lib/models/Series';
+import {LocationProps, useLocations, UseLocationsConfig} from '@/hooks/settings/useLocations';
+import {useTranslations} from '@/lib/i18n';
+import {Plus} from 'lucide-react';
+import PulseLoader from '@/components/ui/PulseLoader';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {SeriesLocationItem} from '@/lib/types/series';
 import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
-import AlertBox from '@/components/AlertBox';
+import AlertBox from '@/components/ui/AlertBox';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import ToggleSwitch from '@/components/form/ToggleSwitch';
 import SeriesImportSelector from '@/components/form/SeriesImportSelector';
 
 import LocationEditorList from './LocationEditorList';
@@ -24,17 +23,17 @@ import LocationEditorEdit from './LocationEditorEdit';
  */
 export default function LocationEditor(): React.JSX.Element {
     const t = useTranslations();
-    const {book} = useContext(BookContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
     const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
     const [showAddForm, setShowAddForm] = useState<boolean>(false);
-
+    
     const config: UseLocationsConfig = useMemo(function (): UseLocationsConfig {
         return {
             entityType: 'book',
             entityId: book?.bookId || '',
         };
     }, [book?.bookId]);
-
+    
     const {
         sections,
         seriesLocations,
@@ -66,7 +65,7 @@ export default function LocationEditor(): React.JSX.Element {
         exitEditMode,
         backToList,
     } = useLocations(config);
-
+    
     const availableSeriesLocations = useMemo(function (): SeriesLocationItem[] {
         return seriesLocations.filter(function (sl: SeriesLocationItem): boolean {
             return !sections.some(function (s: LocationProps): boolean {
@@ -74,12 +73,12 @@ export default function LocationEditor(): React.JSX.Element {
             });
         });
     }, [seriesLocations, sections]);
-
+    
     // Wrapper pour convertir LocationProps en index
     const handleSectionClick = useCallback(function (section: LocationProps, index: number): void {
         enterDetailMode(index);
     }, [enterDetailMode]);
-
+    
     // Gestion de l'ajout
     async function handleAddSection(): Promise<void> {
         if (newSectionName.trim()) {
@@ -89,15 +88,15 @@ export default function LocationEditor(): React.JSX.Element {
             setShowAddForm(true);
         }
     }
-
+    
     async function handleSave(): Promise<void> {
         await exitEditMode(true);
     }
-
+    
     function handleCancel(): void {
         exitEditMode(false);
     }
-
+    
     async function handleDelete(): Promise<void> {
         if (selectedSectionIndex >= 0 && sections[selectedSectionIndex]) {
             await removeSection(sections[selectedSectionIndex].id);
@@ -105,18 +104,14 @@ export default function LocationEditor(): React.JSX.Element {
             backToList();
         }
     }
-
+    
     if (isLoading) {
-        return (
-            <div className="flex items-center justify-center py-8">
-                <FontAwesomeIcon icon={faSpinner} className="w-6 h-6 text-primary animate-spin"/>
-            </div>
-        );
+        return <PulseLoader size="sm"/>;
     }
-
+    
     const selectedSection: LocationProps | undefined = sections[selectedSectionIndex];
     const canExport: boolean = Boolean(bookSeriesId && selectedSection && !selectedSection.seriesLocationId);
-
+    
     return (
         <div className="flex flex-col h-full">
             <ToolDetailHeader
@@ -128,81 +123,67 @@ export default function LocationEditor(): React.JSX.Element {
                 onEdit={enterEditMode}
                 onSave={handleSave}
                 onCancel={handleCancel}
-                onDelete={function (): void { setShowDeleteConfirm(true); }}
-                onExport={canExport ? function (): Promise<void> { return exportToSeries(selectedSection!); } : undefined}
+                onDelete={function (): void {
+                    setShowDeleteConfirm(true);
+                }}
+                onExport={canExport ? function (): Promise<void> {
+                    return exportToSeries(selectedSection!);
+                } : undefined}
                 showExport={canExport}
                 showDelete={Boolean(selectedSection)}
             />
-
+            
             <div className="flex-1 overflow-y-auto">
                 {viewMode === 'list' && (
                     <div className="space-y-3 p-2">
-                        {/* Toggle tool */}
-                        <div className="bg-secondary/20 rounded-lg p-3 border border-secondary/30">
-                            <InputField
-                                icon={faToggleOn}
-                                fieldName={t('locationComponent.enableTool')}
-                                input={
-                                    <ToggleSwitch
-                                        checked={toolEnabled}
-                                        onChange={toggleTool}
-                                    />
-                                }
+                        {/* Import from series */}
+                        {bookSeriesId && availableSeriesLocations.length > 0 && (
+                            <SeriesImportSelector
+                                availableItems={availableSeriesLocations.map(function (sl: SeriesLocationItem) {
+                                    return {id: sl.id, name: sl.name};
+                                })}
+                                onImport={importFromSeries}
+                                placeholder={t('seriesImport.selectElement')}
+                                label={t('seriesImport.importFromSeries')}
                             />
-                        </div>
-
-                        {toolEnabled && (
-                            <>
-                                {/* Import from series */}
-                                {bookSeriesId && availableSeriesLocations.length > 0 && (
-                                    <SeriesImportSelector
-                                        availableItems={availableSeriesLocations.map(function (sl: SeriesLocationItem) {
-                                            return {id: sl.id, name: sl.name};
-                                        })}
-                                        onImport={importFromSeries}
-                                        placeholder={t('seriesImport.selectElement')}
-                                        label={t('seriesImport.importFromSeries')}
-                                    />
-                                )}
-
-                                {showAddForm && (
-                                    <div className="px-2">
-                                        <InputField
-                                            input={
-                                                <TextInput
-                                                    value={newSectionName}
-                                                    setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
-                                                        setNewSectionName(e.target.value);
-                                                    }}
-                                                    placeholder={t('locationComponent.newSectionPlaceholder')}
-                                                />
-                                            }
-                                            actionIcon={faPlus}
-                                            actionLabel={t('locationComponent.addSectionLabel')}
-                                            addButtonCallBack={async function (): Promise<void> {
-                                                await addSection();
-                                                setShowAddForm(false);
-                                            }}
-                                        />
-                                    </div>
-                                )}
-
-                                <LocationEditorList
-                                    sections={sections}
-                                    onSectionClick={handleSectionClick}
-                                    onAddSection={handleAddSection}
-                                />
-                            </>
                         )}
+                        
+                        {showAddForm && (
+                            <div className="px-2">
+                                <InputField
+                                    input={
+                                        <TextInput
+                                            value={newSectionName}
+                                            setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
+                                                setNewSectionName(e.target.value);
+                                            }}
+                                            placeholder={t('locationComponent.newSectionPlaceholder')}
+                                        />
+                                    }
+                                    actionIcon={Plus}
+                                    actionLabel={t('locationComponent.addSectionLabel')}
+                                    addButtonCallBack={async function (): Promise<void> {
+                                        await addSection();
+                                        setShowAddForm(false);
+                                    }}
+                                />
+                            </div>
+                        )}
+                        
+                        <LocationEditorList
+                            sections={sections}
+                            onSectionClick={handleSectionClick}
+                            onAddSection={handleAddSection}
+                        />
                     </div>
                 )}
-
+                
                 {viewMode === 'detail' && selectedSection && (
                     <div className="p-4">
                         <LocationEditorDetail section={selectedSection}/>
                     </div>
                 )}
-
+                
                 {viewMode === 'edit' && selectedSection && (
                     <div className="p-4">
                         <LocationEditorEdit
@@ -225,7 +206,7 @@ export default function LocationEditor(): React.JSX.Element {
                     </div>
                 )}
             </div>
-
+            
             {showDeleteConfirm && selectedSection && (
                 <AlertBox
                     title={t('locationComponent.deleteTitle')}
@@ -234,7 +215,9 @@ export default function LocationEditor(): React.JSX.Element {
                     confirmText={t('common.delete')}
                     cancelText={t('common.cancel')}
                     onConfirm={handleDelete}
-                    onCancel={function (): void { setShowDeleteConfirm(false); }}
+                    onCancel={function (): void {
+                        setShowDeleteConfirm(false);
+                    }}
                 />
             )}
         </div>
diff --git a/components/book/settings/locations/editor/LocationEditorDetail.tsx b/components/book/settings/locations/editor/LocationEditorDetail.tsx
index b1701b7..598cf85 100644
--- a/components/book/settings/locations/editor/LocationEditorDetail.tsx
+++ b/components/book/settings/locations/editor/LocationEditorDetail.tsx
@@ -1,9 +1,8 @@
 'use client';
 import React from 'react';
-import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faLocationDot, faMapPin} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {Element, LocationProps, SubElement} from '@/hooks/settings/useLocations';
+import {MapPin, Navigation} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
 
 interface LocationEditorDetailProps {
     section: LocationProps;
@@ -15,37 +14,39 @@ interface LocationEditorDetailProps {
  * PAS de CollapsableArea, PAS de grids
  */
 export default function LocationEditorDetail({
-    section,
-}: LocationEditorDetailProps): React.JSX.Element {
+                                                 section,
+                                             }: LocationEditorDetailProps): React.JSX.Element {
     const t = useTranslations();
-
+    
     return (
         <div>
             <h3 className="text-text-primary font-semibold text-base mb-4">{section.name}</h3>
-
+            
             {section.elements.length === 0 ? (
                 <p className="text-muted text-sm">{t('locationComponent.noElementAvailable')}</p>
             ) : (
                 <div className="space-y-4">
                     {section.elements.map(function (element: Element): React.JSX.Element {
                         return (
-                            <div key={element.id} className="border-b border-secondary/30 pb-3 last:border-b-0">
+                            <div key={element.id} className="border-b border-secondary pb-3 last:border-b-0">
                                 <div className="flex items-center gap-2 mb-1">
-                                    <FontAwesomeIcon icon={faMapPin} className="text-primary w-3 h-3"/>
+                                    <MapPin className="text-primary w-3 h-3" strokeWidth={1.75}/>
                                     <span className="text-text-primary font-medium text-sm">{element.name}</span>
                                 </div>
                                 {element.description && (
                                     <p className="text-text-secondary text-xs ml-5 mb-2">{element.description}</p>
                                 )}
-
+                                
                                 {element.subElements.length > 0 && (
                                     <div className="ml-5 mt-2 space-y-1">
                                         {element.subElements.map(function (subElement: SubElement): React.JSX.Element {
                                             return (
                                                 <div key={subElement.id} className="flex items-start gap-2">
-                                                    <FontAwesomeIcon icon={faLocationDot} className="text-muted w-2 h-2 mt-1.5"/>
+                                                    <Navigation className="text-muted w-2 h-2 mt-1.5"
+                                                                strokeWidth={1.75}/>
                                                     <div>
-                                                        <span className="text-text-primary text-xs">{subElement.name}</span>
+                                                        <span
+                                                            className="text-text-primary text-xs">{subElement.name}</span>
                                                         {subElement.description && (
                                                             <p className="text-muted text-xs">{subElement.description}</p>
                                                         )}
diff --git a/components/book/settings/locations/editor/LocationEditorEdit.tsx b/components/book/settings/locations/editor/LocationEditorEdit.tsx
index c9e5f7f..a0a0e7c 100644
--- a/components/book/settings/locations/editor/LocationEditorEdit.tsx
+++ b/components/book/settings/locations/editor/LocationEditorEdit.tsx
@@ -1,12 +1,11 @@
 'use client';
 import React, {ChangeEvent} from 'react';
-import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
+import {Element, LocationProps, SubElement} from '@/hooks/settings/useLocations';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import TexteAreaInput from '@/components/form/TexteAreaInput';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faMapPin, faPlus} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import TextAreaInput from '@/components/form/TextAreaInput';
+import {MapPin, Plus} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
 
 interface LocationEditorEditProps {
     section: LocationProps;
@@ -28,33 +27,33 @@ interface LocationEditorEditProps {
  * PAS de CollapsableArea, PAS de grids
  */
 export default function LocationEditorEdit({
-    section,
-    newElementNames,
-    newSubElementNames,
-    onAddElement,
-    onAddSubElement,
-    onRemoveElement,
-    onRemoveSubElement,
-    onUpdateElement,
-    onUpdateSubElement,
-    onNewElementNameChange,
-    onNewSubElementNameChange,
-}: LocationEditorEditProps): React.JSX.Element {
+                                               section,
+                                               newElementNames,
+                                               newSubElementNames,
+                                               onAddElement,
+                                               onAddSubElement,
+                                               onRemoveElement,
+                                               onRemoveSubElement,
+                                               onUpdateElement,
+                                               onUpdateSubElement,
+                                               onNewElementNameChange,
+                                               onNewSubElementNameChange,
+                                           }: LocationEditorEditProps): React.JSX.Element {
     const t = useTranslations();
-
+    
     return (
         <div className="space-y-4">
             <h3 className="text-text-primary font-semibold text-base">{section.name}</h3>
-
+            
             {/* Éléments existants */}
             {section.elements.map(function (element: Element, elementIndex: number): React.JSX.Element {
                 return (
-                    <div key={element.id} className="bg-secondary/20 rounded-lg p-3 border border-secondary/30">
+                    <div key={element.id} className="bg-tertiary rounded-lg p-3 border border-secondary">
                         <div className="flex items-center gap-2 mb-2">
-                            <FontAwesomeIcon icon={faMapPin} className="text-primary w-3 h-3"/>
+                            <MapPin className="text-primary w-3 h-3" strokeWidth={1.75}/>
                             <span className="text-text-secondary text-xs">{t('locationComponent.element')}</span>
                         </div>
-
+                        
                         <InputField
                             input={
                                 <TextInput
@@ -69,9 +68,9 @@ export default function LocationEditorEdit({
                                 return onRemoveElement(section.id, elementIndex);
                             }}
                         />
-
+                        
                         <div className="mt-2">
-                            <TexteAreaInput
+                            <TextAreaInput
                                 value={element.description}
                                 setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                     onUpdateElement(section.id, elementIndex, 'description', e.target.value);
@@ -79,13 +78,13 @@ export default function LocationEditorEdit({
                                 placeholder={t('locationComponent.elementDescriptionPlaceholder')}
                             />
                         </div>
-
+                        
                         {/* Sous-éléments */}
                         {element.subElements.length > 0 && (
-                            <div className="mt-3 pt-3 border-t border-secondary/30 space-y-2">
+                            <div className="mt-3 pt-3 border-t border-secondary space-y-2">
                                 {element.subElements.map(function (subElement: SubElement, subElementIndex: number): React.JSX.Element {
                                     return (
-                                        <div key={subElement.id} className="bg-dark-background/50 rounded p-2">
+                                        <div key={subElement.id} className="bg-secondary rounded p-2">
                                             <InputField
                                                 input={
                                                     <TextInput
@@ -105,7 +104,7 @@ export default function LocationEditorEdit({
                                 })}
                             </div>
                         )}
-
+                        
                         {/* Ajouter sous-élément */}
                         <div className="mt-2">
                             <InputField
@@ -118,7 +117,7 @@ export default function LocationEditorEdit({
                                         placeholder={t('locationComponent.newSubElementPlaceholder')}
                                     />
                                 }
-                                actionIcon={faPlus}
+                                actionIcon={Plus}
                                 actionLabel={t('locationComponent.addSubElement')}
                                 addButtonCallBack={function (): Promise<void> {
                                     return onAddSubElement(section.id, elementIndex);
@@ -128,7 +127,7 @@ export default function LocationEditorEdit({
                     </div>
                 );
             })}
-
+            
             {/* Ajouter élément */}
             <InputField
                 fieldName={t('locationComponent.addElement')}
@@ -141,7 +140,7 @@ export default function LocationEditorEdit({
                         placeholder={t('locationComponent.newElementPlaceholder')}
                     />
                 }
-                actionIcon={faPlus}
+                actionIcon={Plus}
                 addButtonCallBack={function (): Promise<void> {
                     return onAddElement(section.id);
                 }}
diff --git a/components/book/settings/locations/editor/LocationEditorList.tsx b/components/book/settings/locations/editor/LocationEditorList.tsx
index 88d2f80..a89e88c 100644
--- a/components/book/settings/locations/editor/LocationEditorList.tsx
+++ b/components/book/settings/locations/editor/LocationEditorList.tsx
@@ -1,11 +1,13 @@
 'use client';
 import React, {useState} from 'react';
-import {LocationProps, Element} from '@/hooks/settings/useLocations';
+import {Element, LocationProps} from '@/hooks/settings/useLocations';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronRight, faMapMarkerAlt, faPlus} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {MapPin, Plus} from 'lucide-react';
+import EmptyState from '@/components/ui/EmptyState';
+import EntityListItem from '@/components/ui/EntityListItem';
+import AvatarIcon from '@/components/ui/AvatarIcon';
+import {useTranslations} from '@/lib/i18n';
 
 interface LocationEditorListProps {
     sections: LocationProps[];
@@ -19,19 +21,19 @@ interface LocationEditorListProps {
  * PAS de scroll interne (géré par parent ComposerRightBar)
  */
 export default function LocationEditorList({
-    sections,
-    onSectionClick,
-    onAddSection,
-}: LocationEditorListProps): React.JSX.Element {
+                                               sections,
+                                               onSectionClick,
+                                               onAddSection,
+                                           }: LocationEditorListProps): React.JSX.Element {
     const t = useTranslations();
     const [searchQuery, setSearchQuery] = useState<string>('');
-
+    
     function getFilteredSections(): LocationProps[] {
         return sections.filter(function (section: LocationProps): boolean {
             return section.name.toLowerCase().includes(searchQuery.toLowerCase());
         });
     }
-
+    
     function countTotalElements(section: LocationProps): number {
         let count: number = section.elements.length;
         section.elements.forEach(function (element: Element): void {
@@ -39,9 +41,9 @@ export default function LocationEditorList({
         });
         return count;
     }
-
+    
     const filteredSections: LocationProps[] = getFilteredSections();
-
+    
     return (
         <div className="space-y-3">
             <div className="px-2">
@@ -55,55 +57,31 @@ export default function LocationEditorList({
                             placeholder={t('locationComponent.search')}
                         />
                     }
-                    actionIcon={faPlus}
+                    actionIcon={Plus}
                     actionLabel={t('locationComponent.addSectionLabel')}
                     addButtonCallBack={async function (): Promise<void> {
                         onAddSection();
                     }}
                 />
             </div>
-
+            
             <div className="px-2 space-y-2">
                 {filteredSections.length === 0 ? (
-                    <div className="flex flex-col items-center justify-center py-8 text-center">
-                        <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3">
-                            <FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-8 h-8"/>
-                        </div>
-                        <h3 className="text-text-primary font-semibold text-base mb-1">
-                            {t('locationComponent.noSectionAvailable')}
-                        </h3>
-                        <p className="text-muted text-sm max-w-xs">
-                            {t('locationComponent.noSectionDescription')}
-                        </p>
-                    </div>
+                    <EmptyState icon={MapPin} title={t('locationComponent.noSectionAvailable')}
+                                description={t('locationComponent.noSectionDescription')}/>
                 ) : (
                     filteredSections.map(function (section: LocationProps, index: number): React.JSX.Element {
                         return (
-                            <div
+                            <EntityListItem
                                 key={section.id}
-                                onClick={function (): void { onSectionClick(section, index); }}
-                                className="group flex items-center p-3 bg-secondary/30 rounded-lg border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md transition-all duration-200 hover:border-primary/50"
-                            >
-                                <div className="w-10 h-10 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-sm group-hover:scale-110 transition-transform flex items-center justify-center">
-                                    <FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-5 h-5"/>
-                                </div>
-
-                                <div className="ml-3 flex-1 min-w-0">
-                                    <div className="text-text-primary font-semibold text-sm group-hover:text-primary transition-colors truncate">
-                                        {section.name}
-                                    </div>
-                                    <div className="text-muted text-xs truncate">
-                                        {t('locationComponent.elementsCount', {count: countTotalElements(section)})}
-                                    </div>
-                                </div>
-
-                                <div className="w-6 flex justify-center">
-                                    <FontAwesomeIcon
-                                        icon={faChevronRight}
-                                        className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-3 h-3"
-                                    />
-                                </div>
-                            </div>
+                                size="sm"
+                                onClick={function (): void {
+                                    onSectionClick(section, index);
+                                }}
+                                avatar={<AvatarIcon size="sm" icon={MapPin}/>}
+                                title={section.name}
+                                subtitle={t('locationComponent.elementsCount', {count: countTotalElements(section)})}
+                            />
                         );
                     })
                 )}
diff --git a/components/book/settings/locations/settings/LocationSettings.tsx b/components/book/settings/locations/settings/LocationSettings.tsx
index dcddaf4..4d68c54 100644
--- a/components/book/settings/locations/settings/LocationSettings.tsx
+++ b/components/book/settings/locations/settings/LocationSettings.tsx
@@ -1,16 +1,13 @@
 'use client';
 import React, {useContext, useMemo, useState} from 'react';
-import {useLocations, UseLocationsConfig, LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
-import {useTranslations} from 'next-intl';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
-import {BookContext} from '@/context/BookContext';
-import {SeriesLocationItem} from '@/lib/models/Series';
-import InputField from '@/components/form/InputField';
-import ToggleSwitch from '@/components/form/ToggleSwitch';
+import {LocationProps, useLocations, UseLocationsConfig} from '@/hooks/settings/useLocations';
+import {useTranslations} from '@/lib/i18n';
+import PulseLoader from '@/components/ui/PulseLoader';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {SeriesLocationItem} from '@/lib/types/series';
 import SeriesImportSelector from '@/components/form/SeriesImportSelector';
 import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
-import AlertBox from '@/components/AlertBox';
+import AlertBox from '@/components/ui/AlertBox';
 
 import LocationSettingsList from './LocationSettingsList';
 import LocationSettingsDetail from './LocationSettingsDetail';
@@ -19,7 +16,7 @@ import LocationSettingsEdit from './LocationSettingsEdit';
 interface LocationSettingsProps {
     entityType?: 'book' | 'series';
     entityId?: string;
-    showToggle?: boolean;
+    toolEnabled?: boolean;
 }
 
 /**
@@ -28,23 +25,23 @@ interface LocationSettingsProps {
  * Inclut: toggle tool, import from series, export to series
  */
 export default function LocationSettings({
-    entityType = 'book',
-    entityId,
-    showToggle = true,
-}: LocationSettingsProps): React.JSX.Element {
+                                             entityType = 'book',
+                                             entityId,
+                                             toolEnabled: parentToolEnabled,
+                                         }: LocationSettingsProps): React.JSX.Element {
     const t = useTranslations();
-    const {book} = useContext(BookContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
     const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
-
+    
     const resolvedEntityId: string = entityId || book?.bookId || '';
-
+    
     const config: UseLocationsConfig = useMemo(function (): UseLocationsConfig {
         return {
             entityType,
             entityId: resolvedEntityId,
         };
     }, [entityType, resolvedEntityId]);
-
+    
     const {
         sections,
         seriesLocations,
@@ -77,7 +74,7 @@ export default function LocationSettings({
         exitEditMode,
         backToList,
     } = useLocations(config);
-
+    
     const availableSeriesLocations = useMemo(function (): SeriesLocationItem[] {
         return seriesLocations.filter(function (sl: SeriesLocationItem): boolean {
             return !sections.some(function (s: LocationProps): boolean {
@@ -85,15 +82,15 @@ export default function LocationSettings({
             });
         });
     }, [seriesLocations, sections]);
-
+    
     async function handleSave(): Promise<void> {
         await exitEditMode(true);
     }
-
+    
     function handleCancel(): void {
         exitEditMode(false);
     }
-
+    
     async function handleDelete(): Promise<void> {
         if (selectedSectionIndex >= 0 && sections[selectedSectionIndex]) {
             await removeSection(sections[selectedSectionIndex].id);
@@ -101,18 +98,14 @@ export default function LocationSettings({
             backToList();
         }
     }
-
+    
     if (isLoading) {
-        return (
-            <div className="flex items-center justify-center py-12">
-                <FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
-            </div>
-        );
+        return <PulseLoader/>;
     }
-
+    
     const selectedSection: LocationProps | undefined = sections[selectedSectionIndex];
     const canExport: boolean = Boolean(bookSeriesId && selectedSection && !selectedSection.seriesLocationId);
-
+    
     return (
         <div className="flex flex-col h-full">
             {/* Header - uniquement pour detail/edit */}
@@ -125,37 +118,21 @@ export default function LocationSettings({
                 onEdit={enterEditMode}
                 onSave={handleSave}
                 onCancel={handleCancel}
-                onDelete={function (): void { setShowDeleteConfirm(true); }}
-                onExport={canExport ? function (): Promise<void> { return exportToSeries(selectedSection!); } : undefined}
+                onDelete={function (): void {
+                    setShowDeleteConfirm(true);
+                }}
+                onExport={canExport ? function (): Promise<void> {
+                    return exportToSeries(selectedSection!);
+                } : undefined}
                 showExport={canExport}
                 showDelete={Boolean(selectedSection)}
             />
-
+            
             {/* Contenu principal */}
             <div className="flex-1 overflow-y-auto">
                 {viewMode === 'list' && (
                     <div className="space-y-5 p-4">
-                        {/* Toggle tool */}
-                        {showToggle && !isSeriesMode && (
-                            <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
-                                <InputField
-                                    icon={faToggleOn}
-                                    fieldName={t('locationComponent.enableTool')}
-                                    input={
-                                        <ToggleSwitch
-                                            checked={toolEnabled}
-                                            onChange={toggleTool}
-                                        />
-                                    }
-                                />
-                                <p className="text-muted text-sm mt-2">
-                                    {t('locationComponent.enableToolDescription')}
-                                </p>
-                            </div>
-                        )}
-
-                        {/* Contenu si outil activé */}
-                        {(toolEnabled || isSeriesMode) && (
+                        {((parentToolEnabled !== undefined ? parentToolEnabled : toolEnabled) || isSeriesMode) && (
                             <>
                                 {/* Import from series */}
                                 {!isSeriesMode && bookSeriesId && availableSeriesLocations.length > 0 && (
@@ -168,7 +145,7 @@ export default function LocationSettings({
                                         label={t("seriesImport.importFromSeries")}
                                     />
                                 )}
-
+                                
                                 {/* Liste des sections */}
                                 <LocationSettingsList
                                     sections={sections}
@@ -181,13 +158,13 @@ export default function LocationSettings({
                         )}
                     </div>
                 )}
-
+                
                 {viewMode === 'detail' && selectedSection && (
                     <div className="p-4">
                         <LocationSettingsDetail section={selectedSection}/>
                     </div>
                 )}
-
+                
                 {viewMode === 'edit' && selectedSection && (
                     <div className="p-4">
                         <LocationSettingsEdit
@@ -210,7 +187,7 @@ export default function LocationSettings({
                     </div>
                 )}
             </div>
-
+            
             {/* Modal de confirmation de suppression */}
             {showDeleteConfirm && selectedSection && (
                 <AlertBox
@@ -220,7 +197,9 @@ export default function LocationSettings({
                     confirmText={t('common.delete')}
                     cancelText={t('common.cancel')}
                     onConfirm={handleDelete}
-                    onCancel={function (): void { setShowDeleteConfirm(false); }}
+                    onCancel={function (): void {
+                        setShowDeleteConfirm(false);
+                    }}
                 />
             )}
         </div>
diff --git a/components/book/settings/locations/settings/LocationSettingsDetail.tsx b/components/book/settings/locations/settings/LocationSettingsDetail.tsx
index 6af7b12..6c22d75 100644
--- a/components/book/settings/locations/settings/LocationSettingsDetail.tsx
+++ b/components/book/settings/locations/settings/LocationSettingsDetail.tsx
@@ -1,72 +1,69 @@
 'use client';
 import React from 'react';
-import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faMapMarkerAlt, faMapPin, faLocationDot, faChevronRight} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {Element, LocationProps, SubElement} from '@/hooks/settings/useLocations';
+import {ChevronRight, MapPin, Navigation} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import DetailHeroSection from '@/components/ui/DetailHeroSection';
 
 interface LocationSettingsDetailProps {
     section: LocationProps;
 }
 
 export default function LocationSettingsDetail({
-    section,
-}: LocationSettingsDetailProps): React.JSX.Element {
+                                                   section,
+                                               }: LocationSettingsDetailProps): React.JSX.Element {
     const t = useTranslations();
-
+    
     return (
         <div className="space-y-6 px-2 pb-4">
             {/* Hero Section */}
-            <div className="p-6 bg-gradient-to-r from-primary/10 via-secondary/20 to-transparent rounded-2xl border border-secondary/30">
-                <div className="flex items-start gap-4">
-                    <div className="w-16 h-16 rounded-xl bg-primary/20 flex items-center justify-center shrink-0">
-                        <FontAwesomeIcon icon={faMapMarkerAlt} className="w-8 h-8 text-primary"/>
-                    </div>
-                    <div className="flex-1 min-w-0">
-                        <h2 className="text-2xl font-bold text-text-primary">{section.name}</h2>
-                        <p className="text-text-secondary mt-2">
-                            {t("locationComponent.elementsCount", {count: section.elements.length})}
-                        </p>
-                    </div>
-                </div>
-            </div>
-
+            <DetailHeroSection icon={MapPin} title={section.name}>
+                <p className="text-text-secondary mt-2">
+                    {t("locationComponent.elementsCount", {count: section.elements.length})}
+                </p>
+            </DetailHeroSection>
+            
             {/* Éléments en grille */}
             {section.elements.length === 0 ? (
-                <div className="text-center py-12 text-text-secondary bg-secondary/10 rounded-xl border border-secondary/20">
-                    <FontAwesomeIcon icon={faMapPin} className="w-8 h-8 mb-3 opacity-50"/>
+                <div
+                    className="text-center py-12 text-text-secondary">
+                    <MapPin className="w-8 h-8 mb-3 opacity-50" strokeWidth={1.75}/>
                     <p>{t("locationComponent.noElementAvailable")}</p>
                 </div>
             ) : (
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     {section.elements.map(function (element: Element): React.JSX.Element {
                         return (
-                            <div key={element.id} className="p-5 bg-secondary/20 rounded-xl border border-secondary/30 hover:border-primary/30 transition-colors">
+                            <div key={element.id}
+                                 className="p-5 bg-tertiary rounded-xl">
                                 {/* Element header */}
                                 <div className="flex items-center gap-3 mb-3">
-                                    <div className="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center">
-                                        <FontAwesomeIcon icon={faMapPin} className="w-5 h-5 text-primary"/>
+                                    <div
+                                        className="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center">
+                                        <MapPin className="w-5 h-5 text-primary" strokeWidth={1.75}/>
                                     </div>
                                     <h3 className="text-text-primary font-semibold text-lg">{element.name}</h3>
                                 </div>
-
+                                
                                 {/* Description */}
-                                <p className={`mb-4 ${element.description ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
+                                <p className={`mb-4 ${element.description ? 'text-text-primary' : 'text-text-dimmed italic'}`}>
                                     {element.description || '—'}
                                 </p>
-
+                                
                                 {/* Sub-elements */}
                                 {element.subElements.length > 0 && (
-                                    <div className="pt-4 border-t border-secondary/30">
+                                    <div className="pt-4 border-t border-secondary">
                                         <h4 className="text-text-secondary text-xs uppercase tracking-wide mb-3 flex items-center gap-2">
-                                            <FontAwesomeIcon icon={faLocationDot} className="w-3 h-3"/>
+                                            <Navigation className="w-3 h-3" strokeWidth={1.75}/>
                                             {t("locationComponent.subElementsHeading")} ({element.subElements.length})
                                         </h4>
                                         <div className="space-y-2">
                                             {element.subElements.map(function (subElement: SubElement): React.JSX.Element {
                                                 return (
-                                                    <div key={subElement.id} className="flex items-start gap-2 p-2 bg-dark-background/30 rounded-lg">
-                                                        <FontAwesomeIcon icon={faChevronRight} className="w-3 h-3 text-primary mt-1 shrink-0"/>
+                                                    <div key={subElement.id}
+                                                         className="flex items-start gap-2 p-2 bg-secondary rounded-lg">
+                                                        <ChevronRight className="w-3 h-3 text-primary mt-1 shrink-0"
+                                                                      strokeWidth={1.75}/>
                                                         <div className="min-w-0">
                                                             <p className="text-text-primary font-medium">{subElement.name}</p>
                                                             {subElement.description && (
diff --git a/components/book/settings/locations/settings/LocationSettingsEdit.tsx b/components/book/settings/locations/settings/LocationSettingsEdit.tsx
index 5d56d1c..d8faf6e 100644
--- a/components/book/settings/locations/settings/LocationSettingsEdit.tsx
+++ b/components/book/settings/locations/settings/LocationSettingsEdit.tsx
@@ -1,12 +1,12 @@
 'use client';
 import React, {ChangeEvent} from 'react';
-import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
+import {Element, LocationProps, SubElement} from '@/hooks/settings/useLocations';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import TexteAreaInput from '@/components/form/TexteAreaInput';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faMapMarkerAlt, faPlus, faTrash} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import TextAreaInput from '@/components/form/TextAreaInput';
+import {MapPin, Plus} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import IconContainer from '@/components/ui/IconContainer';
 
 interface LocationSettingsEditProps {
     section: LocationProps;
@@ -28,36 +28,34 @@ interface LocationSettingsEditProps {
  * PAS de scroll interne (géré par parent)
  */
 export default function LocationSettingsEdit({
-    section,
-    newElementNames,
-    newSubElementNames,
-    onAddElement,
-    onAddSubElement,
-    onRemoveElement,
-    onRemoveSubElement,
-    onUpdateElement,
-    onUpdateSubElement,
-    onNewElementNameChange,
-    onNewSubElementNameChange,
-}: LocationSettingsEditProps): React.JSX.Element {
+                                                 section,
+                                                 newElementNames,
+                                                 newSubElementNames,
+                                                 onAddElement,
+                                                 onAddSubElement,
+                                                 onRemoveElement,
+                                                 onRemoveSubElement,
+                                                 onUpdateElement,
+                                                 onUpdateSubElement,
+                                                 onNewElementNameChange,
+                                                 onNewSubElementNameChange,
+                                             }: LocationSettingsEditProps): React.JSX.Element {
     const t = useTranslations();
-
+    
     return (
         <div className="space-y-4 px-2 pb-4">
             {/* Header de la section */}
             <div className="flex items-center gap-3 mb-4">
-                <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
-                    <FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-6 h-6"/>
-                </div>
+                <IconContainer icon={MapPin} size="md" shape="circle"/>
                 <div>
                     <h2 className="text-text-primary font-bold text-xl">{section.name}</h2>
                 </div>
             </div>
-
+            
             {/* Éléments existants */}
             {section.elements.map(function (element: Element, elementIndex: number): React.JSX.Element {
                 return (
-                    <div key={element.id} className="bg-secondary/30 rounded-xl p-4 border border-secondary/50">
+                    <div key={element.id} className="space-y-3">
                         <div className="mb-3">
                             <InputField
                                 fieldName={t("locationComponent.elementName")}
@@ -75,26 +73,26 @@ export default function LocationSettingsEdit({
                                 }}
                             />
                         </div>
-
-                        <TexteAreaInput
+                        
+                        <TextAreaInput
                             value={element.description}
                             setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                 onUpdateElement(section.id, elementIndex, 'description', e.target.value);
                             }}
                             placeholder={t("locationComponent.elementDescriptionPlaceholder")}
                         />
-
+                        
                         {/* Sous-éléments */}
-                        <div className="mt-4 pt-4 border-t border-secondary/50">
+                        <div className="mt-4 pt-4 border-t border-secondary">
                             {element.subElements.length > 0 && (
                                 <h4 className="text-sm italic text-text-secondary mb-3">
                                     {t("locationComponent.subElementsHeading")}
                                 </h4>
                             )}
-
+                            
                             {element.subElements.map(function (subElement: SubElement, subElementIndex: number): React.JSX.Element {
                                 return (
-                                    <div key={subElement.id} className="bg-dark-background rounded-lg p-3 mb-3">
+                                    <div key={subElement.id} className="mb-3">
                                         <div className="mb-2">
                                             <InputField
                                                 input={
@@ -111,7 +109,7 @@ export default function LocationSettingsEdit({
                                                 }}
                                             />
                                         </div>
-                                        <TexteAreaInput
+                                        <TextAreaInput
                                             value={subElement.description}
                                             setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                                 onUpdateSubElement(section.id, elementIndex, subElementIndex, 'description', e.target.value);
@@ -121,7 +119,7 @@ export default function LocationSettingsEdit({
                                     </div>
                                 );
                             })}
-
+                            
                             {/* Ajouter sous-élément */}
                             <InputField
                                 input={
@@ -133,7 +131,7 @@ export default function LocationSettingsEdit({
                                         placeholder={t("locationComponent.newSubElementPlaceholder")}
                                     />
                                 }
-                                actionIcon={faPlus}
+                                actionIcon={Plus}
                                 actionLabel={t("locationComponent.addSubElement")}
                                 addButtonCallBack={function (): Promise<void> {
                                     return onAddSubElement(section.id, elementIndex);
@@ -143,9 +141,9 @@ export default function LocationSettingsEdit({
                     </div>
                 );
             })}
-
+            
             {/* Ajouter élément */}
-            <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
+            <div>
                 <InputField
                     fieldName={t("locationComponent.addElement")}
                     input={
@@ -157,7 +155,7 @@ export default function LocationSettingsEdit({
                             placeholder={t("locationComponent.newElementPlaceholder")}
                         />
                     }
-                    actionIcon={faPlus}
+                    actionIcon={Plus}
                     actionLabel={t("locationComponent.addElement")}
                     addButtonCallBack={function (): Promise<void> {
                         return onAddElement(section.id);
diff --git a/components/book/settings/locations/settings/LocationSettingsList.tsx b/components/book/settings/locations/settings/LocationSettingsList.tsx
index 9bed495..0298f76 100644
--- a/components/book/settings/locations/settings/LocationSettingsList.tsx
+++ b/components/book/settings/locations/settings/LocationSettingsList.tsx
@@ -1,11 +1,13 @@
 'use client';
 import React, {ChangeEvent} from 'react';
-import {LocationProps, Element} from '@/hooks/settings/useLocations';
+import {Element, LocationProps} from '@/hooks/settings/useLocations';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronRight, faMapMarkerAlt, faPlus} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {MapPin, Plus} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import EntityListItem from '@/components/ui/EntityListItem';
+import EmptyState from '@/components/ui/EmptyState';
+import AvatarIcon from '@/components/ui/AvatarIcon';
 
 interface LocationSettingsListProps {
     sections: LocationProps[];
@@ -21,14 +23,14 @@ interface LocationSettingsListProps {
  * PAS de scroll interne (géré par parent)
  */
 export default function LocationSettingsList({
-    sections,
-    newSectionName,
-    onSectionClick,
-    onAddSection,
-    onNewSectionNameChange,
-}: LocationSettingsListProps): React.JSX.Element {
+                                                 sections,
+                                                 newSectionName,
+                                                 onSectionClick,
+                                                 onAddSection,
+                                                 onNewSectionNameChange,
+                                             }: LocationSettingsListProps): React.JSX.Element {
     const t = useTranslations();
-
+    
     function countTotalElements(section: LocationProps): number {
         let count: number = section.elements.length;
         section.elements.forEach(function (element: Element): void {
@@ -36,67 +38,40 @@ export default function LocationSettingsList({
         });
         return count;
     }
-
+    
     return (
         <div className="space-y-4">
-            <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
-                <InputField
-                    input={
-                        <TextInput
-                            value={newSectionName}
-                            setValue={function (e: ChangeEvent<HTMLInputElement>): void {
-                                onNewSectionNameChange(e.target.value);
-                            }}
-                            placeholder={t("locationComponent.newSectionPlaceholder")}
-                        />
-                    }
-                    actionIcon={faPlus}
-                    actionLabel={t("locationComponent.addSectionLabel")}
-                    addButtonCallBack={onAddSection}
-                />
-            </div>
-
+            <InputField
+                input={
+                    <TextInput
+                        value={newSectionName}
+                        setValue={function (e: ChangeEvent<HTMLInputElement>): void {
+                            onNewSectionNameChange(e.target.value);
+                        }}
+                        placeholder={t("locationComponent.newSectionPlaceholder")}
+                    />
+                }
+                actionIcon={Plus}
+                actionLabel={t("locationComponent.addSectionLabel")}
+                addButtonCallBack={onAddSection}
+            />
+            
             <div className="space-y-2 px-2">
                 {sections.length === 0 ? (
-                    <div className="flex flex-col items-center justify-center py-12 text-center">
-                        <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-4">
-                            <FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-10 h-10"/>
-                        </div>
-                        <h3 className="text-text-primary font-semibold text-lg mb-2">
-                            {t("locationComponent.noSectionAvailable")}
-                        </h3>
-                        <p className="text-muted text-sm max-w-xs">
-                            {t("locationComponent.noSectionDescription")}
-                        </p>
-                    </div>
+                    <EmptyState icon={MapPin} title={t("locationComponent.noSectionAvailable")}
+                                description={t("locationComponent.noSectionDescription")}/>
                 ) : (
                     sections.map(function (section: LocationProps, index: number): React.JSX.Element {
                         return (
-                            <div
+                            <EntityListItem
                                 key={section.id}
-                                onClick={function (): void { onSectionClick(index); }}
-                                className="group flex items-center p-4 bg-secondary/30 rounded-xl border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md hover:scale-102 transition-all duration-200 hover:border-primary/50"
-                            >
-                                <div className="w-12 h-12 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-md group-hover:scale-110 transition-transform flex items-center justify-center">
-                                    <FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-6 h-6"/>
-                                </div>
-
-                                <div className="ml-4 flex-1 min-w-0">
-                                    <div className="text-text-primary font-bold text-base group-hover:text-primary transition-colors">
-                                        {section.name}
-                                    </div>
-                                    <div className="text-text-secondary text-sm mt-0.5">
-                                        {t("locationComponent.elementsCount", {count: countTotalElements(section)})}
-                                    </div>
-                                </div>
-
-                                <div className="w-8 flex justify-center">
-                                    <FontAwesomeIcon
-                                        icon={faChevronRight}
-                                        className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-4 h-4"
-                                    />
-                                </div>
-                            </div>
+                                onClick={function (): void {
+                                    onSectionClick(index);
+                                }}
+                                avatar={<AvatarIcon icon={MapPin}/>}
+                                title={section.name}
+                                subtitle={t("locationComponent.elementsCount", {count: countTotalElements(section)})}
+                            />
                         );
                     })
                 )}
diff --git a/components/book/settings/objects/page.tsx b/components/book/settings/objects/page.tsx
index 8877750..04f2022 100644
--- a/components/book/settings/objects/page.tsx
+++ b/components/book/settings/objects/page.tsx
@@ -1,327 +1,317 @@
-'use client';
-import {useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faArrowLeft} from '@fortawesome/free-solid-svg-icons';
-
-interface RelatedItem {
-    name: string;
-    type: string;
-    description: string;
-    history: string;
-}
-
-interface Item {
-    id: number | null;
-    name: string;
-    description: string;
-    history: string;
-    location: string;
-    ownedBy: string;
-    functionality: string;
-    image: string;
-    relatedItems: RelatedItem[];
-}
-
-const initialItemState: Item = {
-    id: null,
-    name: '',
-    description: '',
-    history: '',
-    location: '',
-    ownedBy: '',
-    functionality: '',
-    image: '',
-    relatedItems: [],
-};
-
-export default function Items() {
-    const [items, setItems] = useState<Item[]>([
-        {
-            id: 1,
-            name: 'Sword of Destiny',
-            description: 'A powerful sword',
-            history: 'Forged in the ancient times...',
-            location: 'Castle',
-            ownedBy: 'John Doe',
-            functionality: 'Cuts through anything',
-            image: 'https://via.placeholder.com/150',
-            relatedItems: []
-        },
-        {
-            id: 2,
-            name: 'Shield of Valor',
-            description: 'An unbreakable shield',
-            history: 'Used by the legendary hero...',
-            location: 'Fortress',
-            ownedBy: 'Jane Doe',
-            functionality: 'Deflects any attack',
-            image: 'https://via.placeholder.com/150',
-            relatedItems: []
-        }
-    ]);
-
-    const [selectedItem, setSelectedItem] = useState<Item | null>(null);
-    const [searchQuery, setSearchQuery] = useState<string>('');
-    const [newItem, setNewItem] = useState<Item>(initialItemState);
-    const [newRelatedItem, setNewRelatedItem] = useState<RelatedItem>({
-        name: '',
-        type: '',
-        description: '',
-        history: ''
-    });
-
-    const filteredItems = items.filter(
-        (item) =>
-            item.name.toLowerCase().includes(searchQuery.toLowerCase())
-    );
-
-    const handleItemClick = (item: Item) => {
-        setSelectedItem(item);
-    };
-
-    const handleAddItem = () => {
-        setSelectedItem(newItem);
-    };
-
-    const handleSaveItem = () => {
-        if (selectedItem) {
-            if (selectedItem.id === null) {
-                setItems([...items, {...selectedItem, id: items.length + 1}]);
-            } else {
-                setItems(items.map((item) => (item.id === selectedItem.id ? selectedItem : item)));
-            }
-            setSelectedItem(null);
-            setNewItem(initialItemState);
-        }
-    };
-
-    const handleItemChange = (key: keyof Item, value: string) => {
-        if (selectedItem) {
-            setSelectedItem({...selectedItem, [key]: value});
-        }
-    };
-
-    const handleElementChange = (section: keyof Item, index: number, key: keyof RelatedItem, value: string) => {
-        if (selectedItem) {
-            const updatedSection = [...(selectedItem[section] as RelatedItem[])];
-            updatedSection[index][key] = value;
-            setSelectedItem({...selectedItem, [section]: updatedSection});
-        }
-    };
-
-    const handleAddElement = (section: keyof Item, value: RelatedItem) => {
-        if (selectedItem) {
-            const updatedSection = [...(selectedItem[section] as RelatedItem[]), value];
-            setSelectedItem({...selectedItem, [section]: updatedSection});
-        }
-    };
-
-    const handleRemoveElement = (section: keyof Item, index: number) => {
-        if (selectedItem) {
-            const updatedSection = (selectedItem[section] as RelatedItem[]).filter((_, i) => i !== index);
-            setSelectedItem({...selectedItem, [section]: updatedSection});
-        }
-    };
-
-    return (
-        <main className="flex-grow p-8 overflow-y-auto">
-            {selectedItem ? (
-                <div>
-                    <div className="flex justify-between sticky top-0 z-10 bg-gray-900 py-4">
-                        <button onClick={() => setSelectedItem(null)}
-                                className="flex items-center gap-2 text-text-primary bg-secondary/50 hover:bg-secondary px-4 py-2 rounded-xl transition-all duration-200 hover:scale-105 shadow-md">
-                            <FontAwesomeIcon icon={faArrowLeft} className="mr-2 w-5 h-5"/> Back
-                        </button>
-                        <h2 className="text-3xl font-['ADLaM_Display'] text-center text-text-primary">{selectedItem.name}</h2>
-                        <button onClick={handleSaveItem}
-                                className="bg-primary hover:bg-primary-dark text-text-primary font-semibold py-2.5 px-6 rounded-xl shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200">
-                            Save Item
-                        </button>
-                    </div>
-                    <div className="bg-gray-700 rounded-lg p-8 shadow-lg space-y-4">
-                        <div>
-                            <label className="block text-white mb-2" htmlFor="name">Name</label>
-                            <input
-                                type="text"
-                                id="name"
-                                value={selectedItem.name}
-                                onChange={(e) => handleItemChange('name', e.target.value)}
-                                className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                            />
-                        </div>
-                        <div>
-                            <label className="block text-white mb-2" htmlFor="description">Description</label>
-                            <textarea
-                                id="description"
-                                rows={4}
-                                value={selectedItem.description}
-                                onChange={(e) => handleItemChange('description', e.target.value)}
-                                className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                            ></textarea>
-                        </div>
-                        <div>
-                            <label className="block text-white mb-2" htmlFor="history">History</label>
-                            <textarea
-                                id="history"
-                                rows={4}
-                                value={selectedItem.history}
-                                onChange={(e) => handleItemChange('history', e.target.value)}
-                                className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                            ></textarea>
-                        </div>
-                        <div>
-                            <label className="block text-white mb-2" htmlFor="location">Location</label>
-                            <select
-                                id="location"
-                                value={selectedItem.location}
-                                onChange={(e) => handleItemChange('location', e.target.value)}
-                                className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                            >
-                                <option value="">Select Location</option>
-                                <option value="Castle">Castle</option>
-                                <option value="Fortress">Fortress</option>
-                            </select>
-                        </div>
-                        <div>
-                            <label className="block text-white mb-2" htmlFor="ownedBy">Owned By</label>
-                            <select
-                                id="ownedBy"
-                                value={selectedItem.ownedBy}
-                                onChange={(e) => handleItemChange('ownedBy', e.target.value)}
-                                className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                            >
-                                <option value="">Select Owner</option>
-                                {items.map((item) => (
-                                    <option key={item.id} value={item.name}>{item.name}</option>
-                                ))}
-                            </select>
-                        </div>
-                        <div>
-                            <label className="block text-white mb-2" htmlFor="functionality">Functionality</label>
-                            <textarea
-                                id="functionality"
-                                rows={4}
-                                value={selectedItem.functionality}
-                                onChange={(e) => handleItemChange('functionality', e.target.value)}
-                                className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                            ></textarea>
-                        </div>
-                        <div>
-                            <label className="block text-white mb-2" htmlFor="image">Image URL</label>
-                            <input
-                                type="text"
-                                id="image"
-                                value={selectedItem.image}
-                                onChange={(e) => handleItemChange('image', e.target.value)}
-                                className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                            />
-                        </div>
-                    </div>
-                    <div className="bg-gray-700 rounded-lg p-8 shadow-lg space-y-4 mt-4">
-                        <h3 className="text-2xl font-['ADLaM_Display'] text-text-primary">Related Items</h3>
-                        <div className="space-y-2">
-                            {selectedItem.relatedItems.map((relatedItem, index) => (
-                                <details key={index}
-                                         className="bg-secondary/30 rounded-xl mb-4 p-4 shadow-sm hover:shadow-md transition-all duration-200">
-                                    <summary className="text-lg text-white cursor-pointer">{relatedItem.name}</summary>
-                                    <div className="mt-2">
-                                        <label className="block text-white mb-2"
-                                               htmlFor={`related-item-description-${relatedItem.name}`}>Description</label>
-                                        <textarea
-                                            id={`related-item-description-${relatedItem.name}`}
-                                            rows={3}
-                                            value={relatedItem.description}
-                                            onChange={(e) => handleElementChange('relatedItems', index, 'description', e.target.value)}
-                                            className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                                        ></textarea>
-                                        <label className="block text-white mb-2 mt-4"
-                                               htmlFor={`related-item-history-${relatedItem.name}`}>History</label>
-                                        <textarea
-                                            id={`related-item-history-${relatedItem.name}`}
-                                            rows={3}
-                                            value={relatedItem.history}
-                                            onChange={(e) => handleElementChange('relatedItems', index, 'history', e.target.value)}
-                                            className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                                        ></textarea>
-                                        <button
-                                            type="button"
-                                            onClick={() => handleRemoveElement('relatedItems', index)}
-                                            className="bg-error/90 hover:bg-error text-text-primary font-semibold py-2 px-4 rounded-xl shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200 mt-2"
-                                        >
-                                            Remove
-                                        </button>
-                                    </div>
-                                </details>
-                            ))}
-                            <div className="flex space-x-2 items-center mt-2">
-                                <select
-                                    className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                                    onChange={(e) => setNewRelatedItem({...newRelatedItem, name: e.target.value})}
-                                    value={newRelatedItem.name}
-                                >
-                                    <option value="">Select Related Item</option>
-                                    {items.map((item) => (
-                                        <option key={item.id} value={item.name}>{item.name}</option>
-                                    ))}
-                                </select>
-                                <select
-                                    className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                                    onChange={(e) => setNewRelatedItem({...newRelatedItem, type: e.target.value})}
-                                    value={newRelatedItem.type}
-                                >
-                                    <option value="">Relation Type</option>
-                                    <option value="Related">Related</option>
-                                    <option value="Similar">Similar</option>
-                                    {/* Add more relation types as needed */}
-                                </select>
-                                <button
-                                    type="button"
-                                    onClick={() => {
-                                        handleAddElement('relatedItems', {...newRelatedItem});
-                                        setNewRelatedItem({name: '', type: '', description: '', history: ''});
-                                    }}
-                                    className="bg-primary hover:bg-primary-dark text-text-primary font-semibold py-2.5 px-5 rounded-xl shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200"
-                                >
-                                    Add Related Item
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            ) : (
-                <div>
-                    <div className="flex justify-between sticky top-0 z-10 bg-gray-900 py-4">
-                        <input
-                            type="text"
-                            value={searchQuery}
-                            onChange={(e) => setSearchQuery(e.target.value)}
-                            className="w-full px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none hover:bg-secondary hover:border-secondary focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all duration-200"
-                            placeholder="Search Items"
-                        />
-                        <button
-                            type="button"
-                            onClick={handleAddItem}
-                            className="bg-primary hover:bg-primary-dark text-text-primary font-semibold py-2.5 px-5 rounded-xl ml-4 shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200"
-                        >
-                            Add New Item
-                        </button>
-                    </div>
-                    <div>
-                        <h2 className="text-4xl font-['ADLaM_Display'] text-text-primary mb-6">Items</h2>
-                        <div className="flex flex-wrap space-x-4">
-                            {filteredItems.map((item) => (
-                                <div key={item.id} onClick={() => handleItemClick(item)}
-                                     className="cursor-pointer bg-tertiary/90 backdrop-blur-sm p-4 rounded-xl shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-200 border border-secondary/50">
-                                    <img src={item.image || 'https://via.placeholder.com/150'} alt={item.name}
-                                         className="w-full h-32 object-cover rounded-lg mb-2"/>
-                                    <h3 className="text-lg font-bold text-text-primary">{item.name}</h3>
-                                    <p className="text-muted">{item.description}</p>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-            )}
-        </main>
-    );
-}
+'use client';
+import {useState} from 'react';
+import {ArrowLeft, Plus, Trash2} from 'lucide-react';
+import Button from '@/components/ui/Button';
+
+interface RelatedItem {
+    name: string;
+    type: string;
+    description: string;
+    history: string;
+}
+
+interface Item {
+    id: number | null;
+    name: string;
+    description: string;
+    history: string;
+    location: string;
+    ownedBy: string;
+    functionality: string;
+    image: string;
+    relatedItems: RelatedItem[];
+}
+
+const initialItemState: Item = {
+    id: null,
+    name: '',
+    description: '',
+    history: '',
+    location: '',
+    ownedBy: '',
+    functionality: '',
+    image: '',
+    relatedItems: [],
+};
+
+export default function Items() {
+    const [items, setItems] = useState<Item[]>([
+        {
+            id: 1,
+            name: 'Sword of Destiny',
+            description: 'A powerful sword',
+            history: 'Forged in the ancient times...',
+            location: 'Castle',
+            ownedBy: 'John Doe',
+            functionality: 'Cuts through anything',
+            image: 'https://via.placeholder.com/150',
+            relatedItems: []
+        },
+        {
+            id: 2,
+            name: 'Shield of Valor',
+            description: 'An unbreakable shield',
+            history: 'Used by the legendary hero...',
+            location: 'Fortress',
+            ownedBy: 'Jane Doe',
+            functionality: 'Deflects any attack',
+            image: 'https://via.placeholder.com/150',
+            relatedItems: []
+        }
+    ]);
+
+    const [selectedItem, setSelectedItem] = useState<Item | null>(null);
+    const [searchQuery, setSearchQuery] = useState<string>('');
+    const [newItem, setNewItem] = useState<Item>(initialItemState);
+    const [newRelatedItem, setNewRelatedItem] = useState<RelatedItem>({
+        name: '',
+        type: '',
+        description: '',
+        history: ''
+    });
+
+    const filteredItems = items.filter(
+        (item) =>
+            item.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    const handleItemClick = (item: Item) => {
+        setSelectedItem(item);
+    };
+
+    const handleAddItem = () => {
+        setSelectedItem(newItem);
+    };
+
+    const handleSaveItem = () => {
+        if (selectedItem) {
+            if (selectedItem.id === null) {
+                setItems([...items, {...selectedItem, id: items.length + 1}]);
+            } else {
+                setItems(items.map((item) => (item.id === selectedItem.id ? selectedItem : item)));
+            }
+            setSelectedItem(null);
+            setNewItem(initialItemState);
+        }
+    };
+
+    const handleItemChange = (key: keyof Item, value: string) => {
+        if (selectedItem) {
+            setSelectedItem({...selectedItem, [key]: value});
+        }
+    };
+
+    const handleElementChange = (section: keyof Item, index: number, key: keyof RelatedItem, value: string) => {
+        if (selectedItem) {
+            const updatedSection = [...(selectedItem[section] as RelatedItem[])];
+            updatedSection[index][key] = value;
+            setSelectedItem({...selectedItem, [section]: updatedSection});
+        }
+    };
+
+    const handleAddElement = (section: keyof Item, value: RelatedItem) => {
+        if (selectedItem) {
+            const updatedSection = [...(selectedItem[section] as RelatedItem[]), value];
+            setSelectedItem({...selectedItem, [section]: updatedSection});
+        }
+    };
+
+    const handleRemoveElement = (section: keyof Item, index: number) => {
+        if (selectedItem) {
+            const updatedSection = (selectedItem[section] as RelatedItem[]).filter((_, i) => i !== index);
+            setSelectedItem({...selectedItem, [section]: updatedSection});
+        }
+    };
+
+    return (
+        <main className="flex-grow p-8 overflow-y-auto">
+            {selectedItem ? (
+                <div>
+                    <div className="flex justify-between sticky top-0 z-10 bg-darkest-background py-4">
+                        <Button variant="secondary" icon={ArrowLeft} onClick={() => setSelectedItem(null)}>
+                            Back
+                        </Button>
+                        <h2 className="text-3xl font-['ADLaM_Display'] text-center text-text-primary">{selectedItem.name}</h2>
+                        <Button variant="primary" onClick={handleSaveItem}>
+                            Save Item
+                        </Button>
+                    </div>
+                    <div className="bg-secondary rounded-lg p-8 shadow-lg space-y-4">
+                        <div>
+                            <label className="block text-text-primary mb-2" htmlFor="name">Name</label>
+                            <input
+                                type="text"
+                                id="name"
+                                value={selectedItem.name}
+                                onChange={(e) => handleItemChange('name', e.target.value)}
+                                className="input-base"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-text-primary mb-2" htmlFor="description">Description</label>
+                            <textarea
+                                id="description"
+                                rows={4}
+                                value={selectedItem.description}
+                                onChange={(e) => handleItemChange('description', e.target.value)}
+                                className="input-base"
+                            ></textarea>
+                        </div>
+                        <div>
+                            <label className="block text-text-primary mb-2" htmlFor="history">History</label>
+                            <textarea
+                                id="history"
+                                rows={4}
+                                value={selectedItem.history}
+                                onChange={(e) => handleItemChange('history', e.target.value)}
+                                className="input-base"
+                            ></textarea>
+                        </div>
+                        <div>
+                            <label className="block text-text-primary mb-2" htmlFor="location">Location</label>
+                            <select
+                                id="location"
+                                value={selectedItem.location}
+                                onChange={(e) => handleItemChange('location', e.target.value)}
+                                className="input-base"
+                            >
+                                <option value="">Select Location</option>
+                                <option value="Castle">Castle</option>
+                                <option value="Fortress">Fortress</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label className="block text-text-primary mb-2" htmlFor="ownedBy">Owned By</label>
+                            <select
+                                id="ownedBy"
+                                value={selectedItem.ownedBy}
+                                onChange={(e) => handleItemChange('ownedBy', e.target.value)}
+                                className="input-base"
+                            >
+                                <option value="">Select Owner</option>
+                                {items.map((item) => (
+                                    <option key={item.id} value={item.name}>{item.name}</option>
+                                ))}
+                            </select>
+                        </div>
+                        <div>
+                            <label className="block text-text-primary mb-2" htmlFor="functionality">Functionality</label>
+                            <textarea
+                                id="functionality"
+                                rows={4}
+                                value={selectedItem.functionality}
+                                onChange={(e) => handleItemChange('functionality', e.target.value)}
+                                className="input-base"
+                            ></textarea>
+                        </div>
+                        <div>
+                            <label className="block text-text-primary mb-2" htmlFor="image">Image URL</label>
+                            <input
+                                type="text"
+                                id="image"
+                                value={selectedItem.image}
+                                onChange={(e) => handleItemChange('image', e.target.value)}
+                                className="input-base"
+                            />
+                        </div>
+                    </div>
+                    <div className="bg-secondary rounded-lg p-8 shadow-lg space-y-4 mt-4">
+                        <h3 className="text-2xl font-['ADLaM_Display'] text-text-primary">Related Items</h3>
+                        <div className="space-y-2">
+                            {selectedItem.relatedItems.map((relatedItem, index) => (
+                                <details key={index}
+                                         className="bg-secondary/30 rounded-xl mb-4 p-4 shadow-sm hover:shadow-md transition-all duration-200">
+                                    <summary className="text-lg text-text-primary cursor-pointer">{relatedItem.name}</summary>
+                                    <div className="mt-2">
+                                        <label className="block text-text-primary mb-2"
+                                               htmlFor={`related-item-description-${relatedItem.name}`}>Description</label>
+                                        <textarea
+                                            id={`related-item-description-${relatedItem.name}`}
+                                            rows={3}
+                                            value={relatedItem.description}
+                                            onChange={(e) => handleElementChange('relatedItems', index, 'description', e.target.value)}
+                                            className="input-base"
+                                        ></textarea>
+                                        <label className="block text-text-primary mb-2 mt-4"
+                                               htmlFor={`related-item-history-${relatedItem.name}`}>History</label>
+                                        <textarea
+                                            id={`related-item-history-${relatedItem.name}`}
+                                            rows={3}
+                                            value={relatedItem.history}
+                                            onChange={(e) => handleElementChange('relatedItems', index, 'history', e.target.value)}
+                                            className="input-base"
+                                        ></textarea>
+                                        <div className="mt-2">
+                                            <Button variant="danger" icon={Trash2}
+                                                    onClick={() => handleRemoveElement('relatedItems', index)}>
+                                                Remove
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </details>
+                            ))}
+                            <div className="flex space-x-2 items-center mt-2">
+                                <select
+                                    className="input-base"
+                                    onChange={(e) => setNewRelatedItem({...newRelatedItem, name: e.target.value})}
+                                    value={newRelatedItem.name}
+                                >
+                                    <option value="">Select Related Item</option>
+                                    {items.map((item) => (
+                                        <option key={item.id} value={item.name}>{item.name}</option>
+                                    ))}
+                                </select>
+                                <select
+                                    className="input-base"
+                                    onChange={(e) => setNewRelatedItem({...newRelatedItem, type: e.target.value})}
+                                    value={newRelatedItem.type}
+                                >
+                                    <option value="">Relation Type</option>
+                                    <option value="Related">Related</option>
+                                    <option value="Similar">Similar</option>
+                                </select>
+                                <Button variant="primary" icon={Plus} onClick={() => {
+                                    handleAddElement('relatedItems', {...newRelatedItem});
+                                    setNewRelatedItem({name: '', type: '', description: '', history: ''});
+                                }}>
+                                    Add Related Item
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            ) : (
+                <div>
+                    <div className="flex justify-between sticky top-0 z-10 bg-darkest-background py-4">
+                        <input
+                            type="text"
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            className="input-base"
+                            placeholder="Search Items"
+                        />
+                        <div className="ml-4">
+                            <Button variant="primary" icon={Plus} onClick={handleAddItem}>
+                                Add New Item
+                            </Button>
+                        </div>
+                    </div>
+                    <div>
+                        <h2 className="text-4xl font-['ADLaM_Display'] text-text-primary mb-6">Items</h2>
+                        <div className="flex flex-wrap space-x-4">
+                            {filteredItems.map((item) => (
+                                <div key={item.id} onClick={() => handleItemClick(item)}
+                                     className="cursor-pointer bg-tertiary/90 backdrop-blur-sm p-4 rounded-xl shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-200 border border-secondary/50">
+                                    <img src={item.image || 'https://via.placeholder.com/150'} alt={item.name}
+                                         className="w-full h-32 object-cover rounded-lg mb-2"/>
+                                    <h3 className="text-lg font-bold text-text-primary">{item.name}</h3>
+                                    <p className="text-muted">{item.description}</p>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </main>
+    );
+}
diff --git a/components/book/settings/quillsense/QuillSenseSetting.tsx b/components/book/settings/quillsense/QuillSenseSetting.tsx
index 607bcf0..4c91f3f 100644
--- a/components/book/settings/quillsense/QuillSenseSetting.tsx
+++ b/components/book/settings/quillsense/QuillSenseSetting.tsx
@@ -1,30 +1,63 @@
 'use client'
 import React, {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from "react";
-import {BookContext} from "@/context/BookContext";
-import {SessionContext} from "@/context/SessionContext";
-import {AlertContext} from "@/context/AlertContext";
-import {LangContext} from "@/context/LangContext";
-import System from "@/lib/models/System";
-import {QuillSenseSettingsProps} from "@/lib/models/QuillSenseSettings";
-import {useTranslations} from "next-intl";
-import ToggleSwitch from "@/components/form/ToggleSwitch";
-import TexteAreaInput from "@/components/form/TexteAreaInput";
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+import {apiGet, apiPost, apiPut} from "@/lib/api/client";
+import {QuillSenseSettingsProps} from "@/lib/types/quillsense";
+import {GuideLineAI} from "@/lib/types/book";
+import {useTranslations} from '@/lib/i18n';
+import TextAreaInput from "@/components/form/TextAreaInput";
+import TextInput from "@/components/form/TextInput";
+import SelectBox from "@/components/form/SelectBox";
 import InputField from "@/components/form/InputField";
-import {faMagicWandSparkles, faToggleOn} from "@fortawesome/free-solid-svg-icons";
+import PulseLoader from '@/components/ui/PulseLoader';
+import {SettingRef} from "@/lib/types/settings";
+import {
+    advancedDialogueTypes,
+    advancedNarrativePersons,
+    beginnerDialogueTypes,
+    beginnerNarrativePersons,
+    intermediateDialogueTypes,
+    intermediateNarrativePersons,
+    langues,
+    verbalTime
+} from "@/lib/constants/story";
 
-const QuillSenseSetting = forwardRef(function QuillSenseSetting(props, ref) {
+type QuillSenseTab = 'ghostwriter' | 'guideline';
+
+interface QuillSenseSettingProps {
+    toolEnabled?: boolean;
+}
+
+const QuillSenseSetting = forwardRef<SettingRef, QuillSenseSettingProps>(function QuillSenseSetting({toolEnabled}: QuillSenseSettingProps, ref: React.ForwardedRef<SettingRef>): React.JSX.Element | null {
     const t = useTranslations();
-    const {book, setBook} = useContext(BookContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {lang} = useContext(LangContext);
-
-    const [quillsenseEnabled, setQuillsenseEnabled] = useState<boolean>(true);
-    const [advancedPrompt, setAdvancedPrompt] = useState<string>('');
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const bookId: string = book?.bookId ?? '';
+    const userToken: string = session?.accessToken ?? '';
+    const authorLevel: string = session.user?.writingLevel?.toString() ?? '1';
+    
+    const [activeTab, setActiveTab] = useState<QuillSenseTab>('ghostwriter');
     const [isLoading, setIsLoading] = useState<boolean>(true);
-
-    useImperativeHandle(ref, () => ({
-        handleSave
+    
+    // GhostWriter state
+    const [advancedPrompt, setAdvancedPrompt] = useState<string>('');
+    
+    // Guideline AI state
+    const [plotSummary, setPlotSummary] = useState<string>('');
+    const [narrativeType, setNarrativeType] = useState<string>('');
+    const [verbTense, setVerbTense] = useState<string>('');
+    const [dialogueType, setDialogueType] = useState<string>('');
+    const [toneAtmosphere, setToneAtmosphere] = useState<string>('');
+    const [language, setLanguage] = useState<string>('');
+    const [themes, setThemes] = useState<string>('');
+    
+    useImperativeHandle(ref, (): SettingRef => ({
+        handleSave: activeTab === 'ghostwriter' ? handleSaveGhostWriter : handleSaveGuideline
     }));
 
     useEffect((): void => {
@@ -32,97 +65,222 @@ const QuillSenseSetting = forwardRef(function QuillSenseSetting(props, ref) {
             fetchQuillSenseSettings();
         }
     }, [book?.bookId]);
+    
+    useEffect((): void => {
+        if (activeTab === 'guideline' && !isLoading) {
+            fetchAIGuideline();
+        }
+    }, [activeTab]);
 
     async function fetchQuillSenseSettings(): Promise<void> {
         try {
             setIsLoading(true);
-            const settings: QuillSenseSettingsProps = await System.authGetQueryToServer<QuillSenseSettingsProps>(
+            const settings: QuillSenseSettingsProps = await apiGet<QuillSenseSettingsProps>(
                 'book/quillsense-settings',
                 session.accessToken,
                 lang,
                 {bookId: book?.bookId}
             );
-            setQuillsenseEnabled(settings.quillsenseEnabled);
             setAdvancedPrompt(settings.advancedPrompt ?? '');
         } catch (e: unknown) {
             if (e instanceof Error) {
                 errorMessage(e.message);
+            } else {
+                errorMessage(t('quillsenseSetting.unknownError'));
             }
         } finally {
             setIsLoading(false);
         }
     }
-
-    async function handleSave(): Promise<void> {
+    
+    async function fetchAIGuideline(): Promise<void> {
         try {
-            const updateResult: boolean = await System.authPutToServer<boolean>(
+            const response: GuideLineAI = await apiGet<GuideLineAI>(`book/ai/guideline`, userToken, lang, {id: bookId});
+            if (response) {
+                setPlotSummary(response.globalResume || '');
+                setVerbTense(response.verbeTense?.toString() || '');
+                setNarrativeType(response.narrativeType?.toString() || '');
+                setDialogueType(response.dialogueType?.toString() || '');
+                setToneAtmosphere(response.atmosphere || '');
+                setLanguage(response.langue?.toString() || '');
+                setThemes(response.themes || '');
+            }
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t("guideLineSetting.errorUnknown"));
+            }
+        }
+    }
+
+    async function handleSaveGhostWriter(): Promise<void> {
+        try {
+            const updateResult: boolean = await apiPut<boolean>(
                 'book/quillsense-settings',
                 {
                     bookId: book?.bookId,
-                    quillsenseEnabled: quillsenseEnabled,
                     advancedPrompt: advancedPrompt
                 },
                 session.accessToken,
                 lang
             );
             if (updateResult) {
-                successMessage(t('quillSenseSetting.successSave'));
-                // Mettre a jour le contexte du livre
-                if (setBook && book) {
-                    setBook({...book, quillsenseEnabled: quillsenseEnabled});
-                }
+                successMessage(t('quillsenseSetting.saveSuccess'));
             } else {
-                errorMessage(t('quillSenseSetting.errorSave'));
+                errorMessage(t('quillsenseSetting.saveError'));
             }
         } catch (e: unknown) {
             if (e instanceof Error) {
                 errorMessage(e.message);
+            } else {
+                errorMessage(t('quillsenseSetting.unknownError'));
+            }
+        }
+    }
+    
+    async function handleSaveGuideline(): Promise<void> {
+        try {
+            const response: boolean = await apiPost<boolean>(
+                'quillsense/book/guide-line',
+                {
+                    bookId: bookId,
+                    plotSummary: plotSummary,
+                    verbTense: verbTense,
+                    narrativeType: narrativeType,
+                    dialogueType: dialogueType,
+                    toneAtmosphere: toneAtmosphere,
+                    language: language,
+                    themes: themes,
+                },
+                userToken,
+                lang,
+            );
+            if (response) {
+                successMessage(t("guideLineSetting.saveSuccess"));
+            } else {
+                errorMessage(t("guideLineSetting.saveError"));
+            }
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t("guideLineSetting.errorUnknown"));
             }
         }
     }
 
     if (isLoading) {
-        return (
-            <div className="flex items-center justify-center p-8">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-            </div>
-        );
+        return <PulseLoader/>;
+    }
+    
+    if (!toolEnabled) {
+        return null;
     }
 
     return (
-        <div className="space-y-6 p-4">
-            <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
-                <InputField
-                    icon={faToggleOn}
-                    fieldName={t('quillSenseSetting.enableLabel')}
-                    input={
-                        <ToggleSwitch
-                            checked={quillsenseEnabled}
-                            onChange={(checked: boolean): void => setQuillsenseEnabled(checked)}
-                        />
-                    }
-                />
-                <p className="text-muted text-sm mt-2">
-                    {t('quillSenseSetting.enableDescription')}
-                </p>
+        <div className="space-y-6">
+            <div className="flex gap-4 border-b border-secondary">
+                <button
+                    className={`pb-2 text-sm font-medium transition-colors duration-150 ${
+                        activeTab === 'ghostwriter'
+                            ? 'border-b-2 border-primary text-text-primary'
+                            : 'text-muted hover:text-text-primary'
+                    }`}
+                    onClick={(): void => setActiveTab('ghostwriter')}
+                >
+                    GhostWriter
+                </button>
+                <button
+                    className={`pb-2 text-sm font-medium transition-colors duration-150 ${
+                        activeTab === 'guideline'
+                            ? 'border-b-2 border-primary text-text-primary'
+                            : 'text-muted hover:text-text-primary'
+                    }`}
+                    onClick={(): void => setActiveTab('guideline')}
+                >
+                    {t("bookSetting.guideLine")}
+                </button>
             </div>
-
-            <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
-                <InputField
-                    icon={faMagicWandSparkles}
-                    fieldName={t('quillSenseSetting.advancedPromptLabel')}
-                    input={
-                        <TexteAreaInput
-                            value={advancedPrompt}
-                            setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setAdvancedPrompt(e.target.value)}
-                            placeholder={t('quillSenseSetting.advancedPromptPlaceholder')}
+            
+            {activeTab === 'ghostwriter' && (
+                <div className="space-y-4">
+                    <InputField
+                        fieldName={t('quillsenseSetting.advancedPrompt')}
+                        input={
+                            <TextAreaInput
+                                value={advancedPrompt}
+                                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setAdvancedPrompt(e.target.value)}
+                                placeholder={t('quillsenseSetting.advancedPromptPlaceholder')}
+                            />
+                        }
+                    />
+                    <p className="text-muted text-xs">
+                        {t('quillsenseSetting.advancedPromptDescription')}
+                    </p>
+                </div>
+            )}
+            
+            {activeTab === 'guideline' && (
+                <div className="space-y-4">
+                    <InputField fieldName={t("guideLineSetting.plotSummary")} input={
+                        <TextAreaInput
+                            value={plotSummary}
+                            setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setPlotSummary(e.target.value)}
+                            placeholder={t("guideLineSetting.plotSummaryPlaceholder")}
                         />
-                    }
-                />
-                <p className="text-muted text-sm mt-2">
-                    {t('quillSenseSetting.advancedPromptHint')}
-                </p>
-            </div>
+                    }/>
+                    <InputField fieldName={t("guideLineSetting.toneAtmosphere")} input={
+                        <TextInput
+                            value={toneAtmosphere}
+                            setValue={(e: ChangeEvent<HTMLInputElement>): void => setToneAtmosphere(e.target.value)}
+                            placeholder={t("guideLineSetting.toneAtmospherePlaceholder")}
+                        />
+                    }/>
+                    <InputField fieldName={t("guideLineSetting.themes")} input={
+                        <TextInput
+                            value={themes}
+                            setValue={(e: ChangeEvent<HTMLInputElement>): void => setThemes(e.target.value)}
+                            placeholder={t("guideLineSetting.themesPlaceholderQuill")}
+                        />
+                    }/>
+                    <InputField fieldName={t("guideLineSetting.verbTense")} input={
+                        <SelectBox
+                            defaultValue={verbTense}
+                            onChangeCallBack={(event: ChangeEvent<HTMLSelectElement>): void => setVerbTense(event.target.value)}
+                            data={verbalTime}
+                            placeholder={t("guideLineSetting.verbTensePlaceholder")}
+                        />
+                    }/>
+                    <InputField fieldName={t("guideLineSetting.narrativeType")} input={
+                        <SelectBox defaultValue={narrativeType} data={
+                            authorLevel === '1'
+                                ? beginnerNarrativePersons
+                                : authorLevel === '2'
+                                    ? intermediateNarrativePersons
+                                    : advancedNarrativePersons
+                        } onChangeCallBack={(event: ChangeEvent<HTMLSelectElement>): void => {
+                            setNarrativeType(event.target.value)
+                        }} placeholder={t("guideLineSetting.narrativeTypePlaceholder")}/>
+                    }/>
+                    <InputField fieldName={t("guideLineSetting.dialogueType")} input={
+                        <SelectBox defaultValue={dialogueType} data={authorLevel === '1'
+                            ? beginnerDialogueTypes
+                            : authorLevel === '2'
+                                ? intermediateDialogueTypes
+                                : advancedDialogueTypes}
+                                   onChangeCallBack={(event: ChangeEvent<HTMLSelectElement>) => {
+                                       setDialogueType(event.target.value)
+                                   }} placeholder={t("guideLineSetting.dialogueTypePlaceholder")}/>
+                    }/>
+                    <InputField fieldName={t("guideLineSetting.language")} input={
+                        <SelectBox defaultValue={language} data={langues}
+                                   onChangeCallBack={(event: ChangeEvent<HTMLSelectElement>) => {
+                                       setLanguage(event.target.value)
+                                   }} placeholder={t("guideLineSetting.languagePlaceholder")}/>
+                    }/>
+                </div>
+            )}
         </div>
     );
 });
diff --git a/components/book/settings/spells/SpellTagChip.tsx b/components/book/settings/spells/SpellTagChip.tsx
index b6eba57..b9a4737 100644
--- a/components/book/settings/spells/SpellTagChip.tsx
+++ b/components/book/settings/spells/SpellTagChip.tsx
@@ -1,8 +1,8 @@
 'use client';
 import React from 'react';
-import {SpellTagProps} from "@/lib/models/Spell";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faX} from "@fortawesome/free-solid-svg-icons";
+import {SpellTagProps} from "@/lib/types/spell";
+import {X} from 'lucide-react';
+import {dynamicBg, dynamicText} from "@/lib/utils/dynamicStyles";
 
 interface SpellTagChipProps {
     tag: SpellTagProps;
@@ -11,6 +11,16 @@ interface SpellTagChipProps {
     size?: 'sm' | 'md';
 }
 
+function getContrastColor(hexColor: string | null): string {
+    if (!hexColor) return 'var(--color-text-primary)';
+    const hex = hexColor.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? 'var(--color-darkest-background)' : 'var(--color-text-primary)';
+}
+
 export default function SpellTagChip(
     {
         tag,
@@ -19,34 +29,25 @@ export default function SpellTagChip(
         size = 'md'
     }: SpellTagChipProps) {
     
-    function getContrastColor(hexColor: string | null): string {
-        if (!hexColor) return '#FFFFFF';
-        const hex = hexColor.replace('#', '');
-        const r = parseInt(hex.substring(0, 2), 16);
-        const g = parseInt(hex.substring(2, 4), 16);
-        const b = parseInt(hex.substring(4, 6), 16);
-        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-        return luminance > 0.5 ? '#1F2023' : '#FFFFFF';
-    }
-    
+    const chipColor: string = tag.color || 'var(--color-primary)';
+    const bgClass: string = dynamicBg(chipColor);
+    const textClass: string = dynamicText(getContrastColor(tag.color));
+
     const sizeClasses = size === 'sm'
         ? 'px-2 py-0.5 text-xs'
         : 'px-3 py-1 text-sm';
-    
+
     const chipClasses = `
         inline-flex items-center gap-1.5 rounded-full font-medium
         transition-all duration-200
         ${sizeClasses}
-        ${onClick ? 'cursor-pointer hover:scale-105 hover:shadow-md' : ''}
+        ${onClick ? 'cursor-pointer hover:brightness-110' : ''}
+        ${bgClass} ${textClass}
     `;
     
     return (
         <span
             className={chipClasses}
-            style={{
-                backgroundColor: tag.color || '#3B82F6',
-                color: getContrastColor(tag.color)
-            }}
             onClick={onClick}
         >
             {tag.name}
@@ -56,9 +57,9 @@ export default function SpellTagChip(
                         e.stopPropagation();
                         onRemove();
                     }}
-                    className="ml-0.5 hover:bg-white/20 rounded-full p-0.5 transition-all duration-200 hover:scale-110"
+                    className="ml-0.5 hover:bg-text-primary/20 rounded-full p-0.5 transition-colors duration-200"
                 >
-                    <FontAwesomeIcon icon={faX} className={size === 'sm' ? 'w-2 h-2' : 'w-2.5 h-2.5'}/>
+                    <X className={size === 'sm' ? 'w-2 h-2' : 'w-2.5 h-2.5'} strokeWidth={1.75}/>
                 </button>
             )}
         </span>
diff --git a/components/book/settings/spells/SpellTagManager.tsx b/components/book/settings/spells/SpellTagManager.tsx
index ff576a3..8c4ca97 100644
--- a/components/book/settings/spells/SpellTagManager.tsx
+++ b/components/book/settings/spells/SpellTagManager.tsx
@@ -1,18 +1,21 @@
 'use client';
 import React, {useContext, useState} from 'react';
-import {defaultTagColors, SpellTagProps} from "@/lib/models/Spell";
+import {SpellTagProps} from "@/lib/types/spell";
+import {defaultTagColors} from "@/lib/constants/spell";
 import SpellTagChip from "@/components/book/settings/spells/SpellTagChip";
 import InputField from "@/components/form/InputField";
 import TextInput from "@/components/form/TextInput";
-import Modal from "@/components/Modal";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faArrowLeft, faEdit, faPlus, faTags, faTrash} from "@fortawesome/free-solid-svg-icons";
-import {useTranslations} from "next-intl";
-import {AlertContext} from "@/context/AlertContext";
+import Modal from "@/components/ui/Modal";
+import {Pencil, Plus, Tag, Trash2} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import IconContainer from '@/components/ui/IconContainer';
+import Button from '@/components/ui/Button';
+import IconButton from '@/components/ui/IconButton';
+import {dynamicBg} from '@/lib/utils/dynamicStyles';
 
 interface SpellTagManagerProps {
     tags: SpellTagProps[];
-    onBack: () => void;
     onCreateTag: (name: string, color: string) => Promise<SpellTagProps | null>;
     onUpdateTag: (tagId: string, name: string, color: string) => Promise<boolean>;
     onDeleteTag: (tagId: string) => Promise<boolean>;
@@ -21,13 +24,12 @@ interface SpellTagManagerProps {
 export default function SpellTagManager(
     {
         tags,
-        onBack,
         onCreateTag,
         onUpdateTag,
         onDeleteTag,
     }: SpellTagManagerProps) {
     const t = useTranslations();
-    const {successMessage} = useContext(AlertContext);
+    const {successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
     
     const [newTagName, setNewTagName] = useState<string>('');
     const [newTagColor, setNewTagColor] = useState<string>(defaultTagColors[0]);
@@ -87,25 +89,9 @@ export default function SpellTagManager(
     }
     
     return (
-        <div className="space-y-4">
-            <div
-                className="flex justify-between items-center p-4 border-b border-secondary/50 bg-tertiary/50 backdrop-blur-sm">
-                <button
-                    onClick={onBack}
-                    className="flex items-center gap-2 bg-secondary/50 py-2 px-4 rounded-xl border border-secondary/50 hover:bg-secondary hover:border-secondary hover:shadow-md hover:scale-105 transition-all duration-200"
-                >
-                    <FontAwesomeIcon icon={faArrowLeft} className="text-primary w-4 h-4"/>
-                    <span className="text-text-primary font-medium">{t("spellTagManager.back")}</span>
-                </button>
-                <span className="text-text-primary font-semibold text-lg flex items-center gap-2">
-                    <FontAwesomeIcon icon={faTags} className="text-primary w-5 h-5"/>
-                    {t("spellTagManager.title")}
-                </span>
-                <div className="w-24"/>
-            </div>
-            
-            <div className="px-4 space-y-4">
-                <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
+        <div className="space-y-4 p-4">
+            <div className="space-y-4">
+                <div className="bg-tertiary rounded-xl p-4">
                     <h3 className="text-text-primary font-semibold mb-3">{t("spellTagManager.addTag")}</h3>
                     <div className="space-y-3">
                         <InputField
@@ -126,29 +112,22 @@ export default function SpellTagManager(
                                     <button
                                         key={color}
                                         onClick={() => setNewTagColor(color)}
-                                        className={`w-10 h-10 rounded-full transition-all duration-200 ${newTagColor === color ? 'ring-2 ring-offset-2 ring-primary scale-110' : 'hover:scale-110'}`}
-                                        style={{backgroundColor: color}}
+                                        className={`w-10 h-10 rounded-full transition-all duration-200 ${newTagColor === color ? 'ring-2 ring-offset-2 ring-primary' : 'hover:ring-1 hover:ring-primary/50'} ${dynamicBg(color)}`}
                                     />
                                 ))}
                             </div>
                         </div>
-                        <button
-                            onClick={handleAddTag}
-                            disabled={!newTagName.trim()}
-                            className="w-full flex items-center justify-center gap-2 py-2.5 bg-primary text-text-primary rounded-xl hover:bg-primary-dark transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
-                        >
-                            <FontAwesomeIcon icon={faPlus} className="w-4 h-4"/>
+                        <Button variant="primary" icon={Plus} onClick={handleAddTag} disabled={!newTagName.trim()}
+                                fullWidth>
                             {t("spellTagManager.addTag")}
-                        </button>
+                        </Button>
                     </div>
                 </div>
                 
                 <div className="overflow-y-auto max-h-[calc(100vh-500px)]">
                     {tags.length === 0 ? (
                         <div className="flex flex-col items-center justify-center py-12 text-center">
-                            <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
-                                <FontAwesomeIcon icon={faTags} className="text-primary w-8 h-8"/>
-                            </div>
+                            <IconContainer icon={Tag} size="lg" shape="circle"/>
                             <p className="text-muted text-sm">{t("spellTagManager.noTags")}</p>
                         </div>
                     ) : (
@@ -156,22 +135,14 @@ export default function SpellTagManager(
                             {tags.map((tag: SpellTagProps) => (
                                 <div
                                     key={tag.id}
-                                    className="flex items-center justify-between p-3 bg-secondary/30 rounded-xl border border-secondary/50"
+                                    className="flex items-center justify-between p-3 bg-secondary rounded-xl"
                                 >
                                     <SpellTagChip tag={tag}/>
                                     <div className="flex items-center gap-2">
-                                        <button
-                                            onClick={() => handleEditClick(tag)}
-                                            className="p-2 bg-secondary/50 rounded-lg hover:bg-secondary hover:scale-110 transition-all duration-200"
-                                        >
-                                            <FontAwesomeIcon icon={faEdit} className="text-primary w-4 h-4"/>
-                                        </button>
-                                        <button
-                                            onClick={() => handleDeleteClick(tag)}
-                                            className="p-2 bg-error/10 rounded-lg hover:bg-error/20 hover:scale-110 transition-all duration-200"
-                                        >
-                                            <FontAwesomeIcon icon={faTrash} className="text-error w-4 h-4"/>
-                                        </button>
+                                        <IconButton icon={Pencil} variant="ghost" size="sm"
+                                                    onClick={() => handleEditClick(tag)}/>
+                                        <IconButton icon={Trash2} variant="danger" size="sm"
+                                                    onClick={() => handleDeleteClick(tag)}/>
                                     </div>
                                 </div>
                             ))}
@@ -183,7 +154,7 @@ export default function SpellTagManager(
             {showEditModal && editingTag && (
                 <Modal
                     title={t("spellTagManager.editTag")}
-                    size="small"
+                    size="sm"
                     onClose={() => setShowEditModal(false)}
                     onConfirm={handleUpdateTag}
                     confirmText={t("common.confirm")}
@@ -208,8 +179,7 @@ export default function SpellTagManager(
                                     <button
                                         key={color}
                                         onClick={() => setEditTagColor(color)}
-                                        className={`w-10 h-10 rounded-full transition-all duration-200 ${editTagColor === color ? 'ring-2 ring-offset-2 ring-primary scale-110' : 'hover:scale-110'}`}
-                                        style={{backgroundColor: color}}
+                                        className={`w-10 h-10 rounded-full transition-all duration-200 ${editTagColor === color ? 'ring-2 ring-offset-2 ring-primary' : 'hover:ring-1 hover:ring-primary/50'} ${dynamicBg(color)}`}
                                     />
                                 ))}
                             </div>
@@ -231,7 +201,7 @@ export default function SpellTagManager(
             {showDeleteConfirm && tagToDelete && (
                 <Modal
                     title={t("spellTagManager.deleteTagTitle")}
-                    size="small"
+                    size="sm"
                     onClose={() => setShowDeleteConfirm(false)}
                     onConfirm={handleDeleteTag}
                     confirmText={t("spellTagManager.delete")}
diff --git a/components/book/settings/spells/editor/SpellEditor.tsx b/components/book/settings/spells/editor/SpellEditor.tsx
index 0d05e9e..f090af9 100644
--- a/components/book/settings/spells/editor/SpellEditor.tsx
+++ b/components/book/settings/spells/editor/SpellEditor.tsx
@@ -1,18 +1,15 @@
 'use client';
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 import {useSpells, UseSpellsConfig} from '@/hooks/settings/useSpells';
-import {useTranslations} from 'next-intl';
-import {SpellEditState, SpellListItem} from '@/lib/models/Spell';
-import {SeriesSpellListItem} from '@/lib/models/Series';
-import {BookContext} from '@/context/BookContext';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
+import {useTranslations} from '@/lib/i18n';
+import {SpellEditState, SpellListItem} from '@/lib/types/spell';
+import {SeriesSpellListItem} from '@/lib/types/series';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import PulseLoader from '@/components/ui/PulseLoader';
 
 import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
-import InputField from '@/components/form/InputField';
-import ToggleSwitch from '@/components/form/ToggleSwitch';
 import SeriesImportSelector from '@/components/form/SeriesImportSelector';
-import AlertBox from '@/components/AlertBox';
+import AlertBox from '@/components/ui/AlertBox';
 import SpellTagManager from '@/components/book/settings/spells/SpellTagManager';
 
 import SpellEditorList from './SpellEditorList';
@@ -25,16 +22,16 @@ import SpellEditorEdit from './SpellEditorEdit';
  */
 export default function SpellEditor(): React.JSX.Element {
     const t = useTranslations();
-    const {book} = useContext(BookContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
     const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
-
+    
     const config: UseSpellsConfig = useMemo(function (): UseSpellsConfig {
         return {
             entityType: 'book',
             entityId: book?.bookId || '',
         };
     }, [book?.bookId]);
-
+    
     const {
         spells,
         seriesSpells,
@@ -64,7 +61,7 @@ export default function SpellEditor(): React.JSX.Element {
         deleteTag,
         handleSyncComplete,
     } = useSpells(config);
-
+    
     const availableSeriesSpells = useMemo(function (): SeriesSpellListItem[] {
         return seriesSpells.filter(function (ss: SeriesSpellListItem): boolean {
             return !spells.some(function (s: SpellListItem): boolean {
@@ -72,19 +69,19 @@ export default function SpellEditor(): React.JSX.Element {
             });
         });
     }, [seriesSpells, spells]);
-
+    
     const handleSpellChange = useCallback(function (key: keyof SpellEditState, value: string | string[] | null): void {
         updateSpellField(key, value);
     }, [updateSpellField]);
-
+    
     async function handleSave(): Promise<void> {
         await exitEditMode(true);
     }
-
+    
     function handleCancel(): void {
         exitEditMode(false);
     }
-
+    
     async function handleDelete(): Promise<void> {
         if (selectedSpell?.id) {
             await deleteSpell(selectedSpell.id);
@@ -92,82 +89,75 @@ export default function SpellEditor(): React.JSX.Element {
             backToList();
         }
     }
-
+    
     if (isLoading) {
-        return (
-            <div className="flex items-center justify-center py-8">
-                <FontAwesomeIcon icon={faSpinner} className="w-6 h-6 text-primary animate-spin"/>
-            </div>
-        );
+        return <PulseLoader size="sm"/>;
     }
-
+    
     const isNew: boolean = selectedSpell?.id === null;
     const canExport: boolean = Boolean(bookSeriesId && selectedSpell?.id && !selectedSpell.seriesSpellId);
-
+    
     return (
         <div className="flex flex-col h-full">
             <ToolDetailHeader
-                title={selectedSpell?.name || ''}
-                defaultTitle={t('spellDetail.newSpell')}
-                viewMode={viewMode}
+                title={showTagManager ? t('spellTagManager.title') : (selectedSpell?.name || '')}
+                defaultTitle={showTagManager ? t('spellTagManager.title') : t('spellDetail.newSpell')}
+                viewMode={showTagManager ? 'detail' : viewMode}
                 isNew={isNew}
-                onBack={backToList}
-                onEdit={enterEditMode}
+                onBack={showTagManager ? function (): void {
+                    setShowTagManager(false);
+                } : backToList}
+                onEdit={showTagManager ? undefined : enterEditMode}
                 onSave={handleSave}
                 onCancel={handleCancel}
-                onDelete={function (): void { setShowDeleteConfirm(true); }}
-                onExport={canExport ? exportToSeries : undefined}
-                showExport={canExport}
-                showDelete={Boolean(selectedSpell?.id)}
+                onDelete={showTagManager ? undefined : function (): void {
+                    setShowDeleteConfirm(true);
+                }}
+                onExport={canExport && !showTagManager ? exportToSeries : undefined}
+                showExport={canExport && !showTagManager}
+                showDelete={!showTagManager && Boolean(selectedSpell?.id)}
             />
-
+            
             <div className="flex-1 overflow-y-auto">
-                {viewMode === 'list' && (
+                {showTagManager && (
+                    <SpellTagManager
+                        tags={tags}
+                        onCreateTag={createTag}
+                        onUpdateTag={updateTag}
+                        onDeleteTag={deleteTag}
+                    />
+                )}
+                
+                {!showTagManager && viewMode === 'list' && (
                     <div className="space-y-3 p-2">
-                        {/* Toggle tool */}
-                        <div className="bg-secondary/20 rounded-lg p-3 border border-secondary/30">
-                            <InputField
-                                icon={faToggleOn}
-                                fieldName={t('spellComponent.enableTool')}
-                                input={
-                                    <ToggleSwitch
-                                        checked={toolEnabled}
-                                        onChange={toggleTool}
-                                    />
-                                }
+                        {/* Import from series */}
+                        {bookSeriesId && availableSeriesSpells.length > 0 && (
+                            <SeriesImportSelector
+                                availableItems={availableSeriesSpells.map(function (ss: SeriesSpellListItem) {
+                                    return {
+                                        id: ss.id,
+                                        name: ss.name
+                                    };
+                                })}
+                                onImport={importFromSeries}
+                                placeholder={t('seriesImport.selectElement')}
+                                label={t('seriesImport.importFromSeries')}
                             />
-                        </div>
-
-                        {toolEnabled && (
-                            <>
-                                {/* Import from series */}
-                                {bookSeriesId && availableSeriesSpells.length > 0 && (
-                                    <SeriesImportSelector
-                                        availableItems={availableSeriesSpells.map(function (ss: SeriesSpellListItem) {
-                                            return {
-                                                id: ss.id,
-                                                name: ss.name
-                                            };
-                                        })}
-                                        onImport={importFromSeries}
-                                        placeholder={t('seriesImport.selectElement')}
-                                        label={t('seriesImport.importFromSeries')}
-                                    />
-                                )}
-
-                                <SpellEditorList
-                                    spells={spells}
-                                    tags={tags}
-                                    onSpellClick={enterDetailMode}
-                                    onAddSpell={addNewSpell}
-                                    onManageTags={function (): void { setShowTagManager(true); }}
-                                />
-                            </>
                         )}
+                        
+                        <SpellEditorList
+                            spells={spells}
+                            tags={tags}
+                            onSpellClick={enterDetailMode}
+                            onAddSpell={addNewSpell}
+                            onManageTags={function (): void {
+                                setShowTagManager(true);
+                            }}
+                        />
                     </div>
                 )}
-
-                {viewMode === 'detail' && selectedSpell && (
+                
+                {!showTagManager && viewMode === 'detail' && selectedSpell && (
                     <div className="p-4">
                         <SpellEditorDetail
                             spell={selectedSpell}
@@ -176,8 +166,8 @@ export default function SpellEditor(): React.JSX.Element {
                         />
                     </div>
                 )}
-
-                {viewMode === 'edit' && selectedSpell && (
+                
+                {!showTagManager && viewMode === 'edit' && selectedSpell && (
                     <div className="p-4">
                         <SpellEditorEdit
                             spell={selectedSpell}
@@ -190,7 +180,7 @@ export default function SpellEditor(): React.JSX.Element {
                     </div>
                 )}
             </div>
-
+            
             {showDeleteConfirm && selectedSpell?.id && (
                 <AlertBox
                     title={t('spellDetail.deleteTitle')}
@@ -199,19 +189,12 @@ export default function SpellEditor(): React.JSX.Element {
                     confirmText={t('common.delete')}
                     cancelText={t('common.cancel')}
                     onConfirm={handleDelete}
-                    onCancel={function (): void { setShowDeleteConfirm(false); }}
-                />
-            )}
-
-            {showTagManager && (
-                <SpellTagManager
-                    tags={tags}
-                    onBack={function (): void { setShowTagManager(false); }}
-                    onCreateTag={createTag}
-                    onUpdateTag={updateTag}
-                    onDeleteTag={deleteTag}
+                    onCancel={function (): void {
+                        setShowDeleteConfirm(false);
+                    }}
                 />
             )}
+            
         </div>
     );
 }
diff --git a/components/book/settings/spells/editor/SpellEditorDetail.tsx b/components/book/settings/spells/editor/SpellEditorDetail.tsx
index bc930b5..cac2656 100644
--- a/components/book/settings/spells/editor/SpellEditorDetail.tsx
+++ b/components/book/settings/spells/editor/SpellEditorDetail.tsx
@@ -1,10 +1,12 @@
 'use client';
 import React from 'react';
-import {SpellEditState, spellPowerLevels, SpellTagProps} from '@/lib/models/Spell';
-import {SeriesSpellDetailResponse} from '@/lib/models/Series';
-import {SelectBoxProps} from '@/shared/interface';
+import {SpellEditState, SpellTagProps} from '@/lib/types/spell';
+import {spellPowerLevels} from '@/lib/constants/spell';
+import {SeriesSpellDetailResponse} from '@/lib/types/series';
+import {SelectBoxProps} from '@/components/form/SelectBox';
 import SpellTagChip from '@/components/book/settings/spells/SpellTagChip';
-import {useTranslations} from 'next-intl';
+import DetailField from '@/components/ui/DetailField';
+import {useTranslations} from '@/lib/i18n';
 
 interface SpellEditorDetailProps {
     spell: SpellEditState;
@@ -18,18 +20,18 @@ interface SpellEditorDetailProps {
  * PAS de CollapsableArea, PAS de grids
  */
 export default function SpellEditorDetail({
-    spell,
-    availableTags,
-    seriesSpell,
-}: SpellEditorDetailProps): React.JSX.Element {
+                                              spell,
+                                              availableTags,
+                                              seriesSpell,
+                                          }: SpellEditorDetailProps): React.JSX.Element {
     const t = useTranslations();
-
+    
     function getSelectedTags(): SpellTagProps[] {
         return availableTags.filter(function (tag: SpellTagProps): boolean {
             return spell.tags.includes(tag.id);
         });
     }
-
+    
     function getLocalizedPowerLevel(): string {
         if (!spell.powerLevel || spell.powerLevel === 'none') {
             return '';
@@ -39,31 +41,22 @@ export default function SpellEditorDetail({
         });
         return level ? t(level.label) : spell.powerLevel;
     }
-
-    function renderField(label: string, value: string | null | undefined): React.JSX.Element | null {
-        if (!value) return null;
-        return (
-            <div className="mb-3">
-                <span className="text-text-secondary text-xs block mb-1">{label}</span>
-                <p className="text-text-primary text-sm whitespace-pre-wrap">{value}</p>
-            </div>
-        );
-    }
-
+    
     const selectedTags: SpellTagProps[] = getSelectedTags();
     const powerLevelText: string = getLocalizedPowerLevel();
 
     return (
         <div>
             <h3 className="text-text-primary font-semibold text-base mb-4">{spell.name}</h3>
-
-            {renderField(t('spellDetail.description'), spell.description)}
-            {renderField(t('spellDetail.appearance'), spell.appearance)}
-            {powerLevelText && renderField(t('spellDetail.powerLevel'), powerLevelText)}
-            {renderField(t('spellDetail.components'), spell.components)}
-            {renderField(t('spellDetail.limitations'), spell.limitations)}
-            {renderField(t('spellDetail.notes'), spell.notes)}
-
+            
+            <DetailField variant="compact" label={t('spellDetail.description')} value={spell.description}/>
+            <DetailField variant="compact" label={t('spellDetail.appearance')} value={spell.appearance}/>
+            {powerLevelText &&
+                <DetailField variant="compact" label={t('spellDetail.powerLevel')} value={powerLevelText}/>}
+            <DetailField variant="compact" label={t('spellDetail.components')} value={spell.components}/>
+            <DetailField variant="compact" label={t('spellDetail.limitations')} value={spell.limitations}/>
+            <DetailField variant="compact" label={t('spellDetail.notes')} value={spell.notes}/>
+            
             {selectedTags.length > 0 && (
                 <div className="mb-3">
                     <span className="text-text-secondary text-xs block mb-1">{t('spellDetail.tags')}</span>
diff --git a/components/book/settings/spells/editor/SpellEditorEdit.tsx b/components/book/settings/spells/editor/SpellEditorEdit.tsx
index ad4d0ee..9fdbb27 100644
--- a/components/book/settings/spells/editor/SpellEditorEdit.tsx
+++ b/components/book/settings/spells/editor/SpellEditorEdit.tsx
@@ -1,17 +1,18 @@
 'use client';
 import React, {ChangeEvent, useState} from 'react';
-import {defaultTagColors, SpellEditState, spellPowerLevels, SpellTagProps} from '@/lib/models/Spell';
-import {SeriesSpellDetailResponse} from '@/lib/models/Series';
-import {SelectBoxProps} from '@/shared/interface';
+import {SpellEditState, SpellTagProps} from '@/lib/types/spell';
+import {defaultTagColors, spellPowerLevels} from '@/lib/constants/spell';
+import {SeriesSpellDetailResponse} from '@/lib/types/series';
+import SelectBox, {SelectBoxProps} from '@/components/form/SelectBox';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import TexteAreaInput from '@/components/form/TexteAreaInput';
-import SelectBox from '@/components/form/SelectBox';
+import TextAreaInput from '@/components/form/TextAreaInput';
 import SpellTagChip from '@/components/book/settings/spells/SpellTagChip';
 import SyncFieldWrapper from '@/components/form/SyncFieldWrapper';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faPlus} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {Plus} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import {dynamicBg, dynamicBgWithOpacity, dynamicBorderWithOpacity, dynamicText} from '@/lib/utils/dynamicStyles';
+import Button from '@/components/ui/Button';
 
 interface SpellEditorEditProps {
     spell: SpellEditState;
@@ -28,32 +29,32 @@ interface SpellEditorEditProps {
  * Gestion des tags, SyncFieldWrapper, tous les champs
  */
 export default function SpellEditorEdit({
-    spell,
-    availableTags,
-    onSpellChange,
-    onCreateTag,
-    seriesSpell,
-    onSyncComplete,
-}: SpellEditorEditProps): React.JSX.Element {
+                                            spell,
+                                            availableTags,
+                                            onSpellChange,
+                                            onCreateTag,
+                                            seriesSpell,
+                                            onSyncComplete,
+                                        }: SpellEditorEditProps): React.JSX.Element {
     const t = useTranslations();
-
+    
     const [tagSearchQuery, setTagSearchQuery] = useState<string>('');
     const [isCreatingTag, setIsCreatingTag] = useState<boolean>(false);
     const [newTagColor, setNewTagColor] = useState<string>(defaultTagColors[0]);
-
+    
     function handleAddTag(tagId: string): void {
         if (!spell.tags.includes(tagId)) {
             onSpellChange('tags', [...spell.tags, tagId]);
         }
         setTagSearchQuery('');
     }
-
+    
     function handleRemoveTag(tagId: string): void {
         onSpellChange('tags', spell.tags.filter(function (id: string): boolean {
             return id !== tagId;
         }));
     }
-
+    
     function getFilteredAvailableTags(): SpellTagProps[] {
         return availableTags.filter(function (tag: SpellTagProps): boolean {
             const notAlreadyAdded: boolean = !spell.tags.includes(tag.id);
@@ -61,13 +62,13 @@ export default function SpellEditorEdit({
             return notAlreadyAdded && matchesSearch;
         });
     }
-
+    
     function getSelectedTags(): SpellTagProps[] {
         return availableTags.filter(function (tag: SpellTagProps): boolean {
             return spell.tags.includes(tag.id);
         });
     }
-
+    
     async function handleCreateTag(): Promise<void> {
         if (!tagSearchQuery.trim()) return;
         const newTag: SpellTagProps | null = await onCreateTag(tagSearchQuery.trim(), newTagColor);
@@ -77,7 +78,7 @@ export default function SpellEditorEdit({
             setNewTagColor(defaultTagColors[0]);
         }
     }
-
+    
     function getLocalizedPowerLevels(): SelectBoxProps[] {
         return spellPowerLevels.map(function (level: SelectBoxProps): SelectBoxProps {
             return {
@@ -86,7 +87,7 @@ export default function SpellEditorEdit({
             };
         });
     }
-
+    
     const filteredTags: SpellTagProps[] = getFilteredAvailableTags();
     const selectedTags: SpellTagProps[] = getSelectedTags();
     const showCreateOption: boolean = Boolean(
@@ -95,11 +96,11 @@ export default function SpellEditorEdit({
             return tag.name.toLowerCase() === tagSearchQuery.toLowerCase();
         })
     );
-
+    
     return (
         <div className="space-y-4">
             {/* Informations de base */}
-            <div className="border-b border-secondary/30 pb-3">
+            <div className="border-b border-secondary pb-3">
                 <h4 className="text-text-primary font-medium text-sm mb-3">{t('spellDetail.basicInfo')}</h4>
                 <div className="space-y-3">
                     <InputField
@@ -112,7 +113,9 @@ export default function SpellEditorEdit({
                                 bookElementId={spell.id || ''}
                                 field="name"
                                 elementType="spell"
-                                onDownload={function (): void { onSpellChange('name', seriesSpell?.name || ''); }}
+                                onDownload={function (): void {
+                                    onSpellChange('name', seriesSpell?.name || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
                                 <TextInput
@@ -125,7 +128,7 @@ export default function SpellEditorEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('spellDetail.description')}
                         input={
@@ -136,10 +139,12 @@ export default function SpellEditorEdit({
                                 bookElementId={spell.id || ''}
                                 field="description"
                                 elementType="spell"
-                                onDownload={function (): void { onSpellChange('description', seriesSpell?.description || ''); }}
+                                onDownload={function (): void {
+                                    onSpellChange('description', seriesSpell?.description || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
-                                <TexteAreaInput
+                                <TextAreaInput
                                     value={spell.description}
                                     setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                         onSpellChange('description', e.target.value);
@@ -149,7 +154,7 @@ export default function SpellEditorEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('spellDetail.appearance')}
                         input={
@@ -160,10 +165,12 @@ export default function SpellEditorEdit({
                                 bookElementId={spell.id || ''}
                                 field="appearance"
                                 elementType="spell"
-                                onDownload={function (): void { onSpellChange('appearance', seriesSpell?.appearance || ''); }}
+                                onDownload={function (): void {
+                                    onSpellChange('appearance', seriesSpell?.appearance || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
-                                <TexteAreaInput
+                                <TextAreaInput
                                     value={spell.appearance}
                                     setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                         onSpellChange('appearance', e.target.value);
@@ -175,9 +182,9 @@ export default function SpellEditorEdit({
                     />
                 </div>
             </div>
-
+            
             {/* Tags */}
-            <div className="border-b border-secondary/30 pb-3">
+            <div className="border-b border-secondary pb-3">
                 <h4 className="text-text-primary font-medium text-sm mb-3">{t('spellDetail.tags')}</h4>
                 <div className="space-y-3">
                     {selectedTags.length > 0 && (
@@ -187,13 +194,15 @@ export default function SpellEditorEdit({
                                     <SpellTagChip
                                         key={tag.id}
                                         tag={tag}
-                                        onRemove={function (): void { handleRemoveTag(tag.id); }}
+                                        onRemove={function (): void {
+                                            handleRemoveTag(tag.id);
+                                        }}
                                     />
                                 );
                             })}
                         </div>
                     )}
-
+                    
                     <TextInput
                         value={tagSearchQuery}
                         setValue={function (e: ChangeEvent<HTMLInputElement>): void {
@@ -201,43 +210,42 @@ export default function SpellEditorEdit({
                         }}
                         placeholder={t('spellDetail.addTag')}
                     />
-
+                    
                     {filteredTags.length > 0 && (
                         <div className="flex flex-wrap gap-1.5">
                             {filteredTags.map(function (tag: SpellTagProps): React.JSX.Element {
                                 return (
                                     <button
                                         key={tag.id}
-                                        onClick={function (): void { handleAddTag(tag.id); }}
-                                        className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs transition-all duration-200 hover:scale-105 border"
-                                        style={{
-                                            backgroundColor: `${tag.color || '#3B82F6'}20`,
-                                            borderColor: `${tag.color || '#3B82F6'}50`,
-                                            color: tag.color || '#3B82F6'
+                                        onClick={function (): void {
+                                            handleAddTag(tag.id);
                                         }}
+                                        className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs transition-colors duration-200 hover:brightness-110 border ${dynamicBgWithOpacity(tag.color || '#51AE84', '20')} ${dynamicBorderWithOpacity(tag.color || '#51AE84', '50')} ${dynamicText(tag.color || 'var(--color-primary)')}`}
                                     >
-                                        <FontAwesomeIcon icon={faPlus} className="w-2.5 h-2.5"/>
+                                        <Plus className="w-2.5 h-2.5" strokeWidth={1.75}/>
                                         {tag.name}
                                     </button>
                                 );
                             })}
                         </div>
                     )}
-
+                    
                     {showCreateOption && !isCreatingTag && (
                         <button
-                            onClick={function (): void { setIsCreatingTag(true); }}
-                            className="w-full flex items-center gap-2 px-3 py-2 bg-tertiary hover:bg-secondary/50 transition-colors text-left rounded-lg border border-secondary/50"
+                            onClick={function (): void {
+                                setIsCreatingTag(true);
+                            }}
+                            className="w-full flex items-center gap-2 px-3 py-2 bg-tertiary hover:bg-secondary transition-colors text-left rounded-lg border border-secondary"
                         >
-                            <FontAwesomeIcon icon={faPlus} className="text-primary w-3 h-3"/>
+                            <Plus className="text-primary w-3 h-3" strokeWidth={1.75}/>
                             <span className="text-primary font-medium text-sm">
                                 {t('spellDetail.createTag', {name: tagSearchQuery})}
                             </span>
                         </button>
                     )}
-
+                    
                     {isCreatingTag && (
-                        <div className="p-3 bg-tertiary rounded-lg border border-secondary/50">
+                        <div className="p-3 bg-tertiary rounded-lg border border-secondary">
                             <p className="text-text-secondary text-xs mb-2">
                                 {t('spellDetail.createTag', {name: tagSearchQuery})}
                             </p>
@@ -246,34 +254,31 @@ export default function SpellEditorEdit({
                                     return (
                                         <button
                                             key={color}
-                                            onClick={function (): void { setNewTagColor(color); }}
-                                            className={`w-6 h-6 rounded-full transition-all duration-200 ${newTagColor === color ? 'ring-2 ring-offset-1 ring-primary scale-110' : 'hover:scale-110'}`}
-                                            style={{backgroundColor: color}}
+                                            onClick={function (): void {
+                                                setNewTagColor(color);
+                                            }}
+                                            className={`w-6 h-6 rounded-full transition-all duration-200 ${newTagColor === color ? 'ring-2 ring-offset-1 ring-primary' : 'hover:ring-1 hover:ring-primary/50'} ${dynamicBg(color)}`}
                                         />
                                     );
                                 })}
                             </div>
                             <div className="flex gap-2">
-                                <button
-                                    onClick={function (): void { setIsCreatingTag(false); }}
-                                    className="flex-1 py-1.5 px-2 bg-secondary/50 text-text-primary rounded-lg hover:bg-secondary transition-colors text-sm"
-                                >
+                                <Button variant="secondary" size="sm" onClick={function (): void {
+                                    setIsCreatingTag(false);
+                                }}>
                                     {t('common.cancel')}
-                                </button>
-                                <button
-                                    onClick={handleCreateTag}
-                                    className="flex-1 py-1.5 px-2 bg-primary text-text-primary rounded-lg hover:bg-primary-dark transition-colors text-sm"
-                                >
+                                </Button>
+                                <Button variant="primary" size="sm" onClick={handleCreateTag}>
                                     {t('common.confirm')}
-                                </button>
+                                </Button>
                             </div>
                         </div>
                     )}
                 </div>
             </div>
-
+            
             {/* Niveau de puissance */}
-            <div className="border-b border-secondary/30 pb-3">
+            <div className="border-b border-secondary pb-3">
                 <h4 className="text-text-primary font-medium text-sm mb-3">{t('spellDetail.powerLevel')}</h4>
                 <SyncFieldWrapper
                     seriesElementId={spell.seriesSpellId}
@@ -282,7 +287,9 @@ export default function SpellEditorEdit({
                     bookElementId={spell.id || ''}
                     field="powerLevel"
                     elementType="spell"
-                    onDownload={function (): void { onSpellChange('powerLevel', seriesSpell?.powerLevel || null); }}
+                    onDownload={function (): void {
+                        onSpellChange('powerLevel', seriesSpell?.powerLevel || null);
+                    }}
                     onSyncComplete={onSyncComplete}
                 >
                     <SelectBox
@@ -294,9 +301,9 @@ export default function SpellEditorEdit({
                     />
                 </SyncFieldWrapper>
             </div>
-
+            
             {/* Composants */}
-            <div className="border-b border-secondary/30 pb-3">
+            <div className="border-b border-secondary pb-3">
                 <h4 className="text-text-primary font-medium text-sm mb-3">{t('spellDetail.components')}</h4>
                 <SyncFieldWrapper
                     seriesElementId={spell.seriesSpellId}
@@ -305,10 +312,12 @@ export default function SpellEditorEdit({
                     bookElementId={spell.id || ''}
                     field="components"
                     elementType="spell"
-                    onDownload={function (): void { onSpellChange('components', seriesSpell?.components || null); }}
+                    onDownload={function (): void {
+                        onSpellChange('components', seriesSpell?.components || null);
+                    }}
                     onSyncComplete={onSyncComplete}
                 >
-                    <TexteAreaInput
+                    <TextAreaInput
                         value={spell.components || ''}
                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                             onSpellChange('components', e.target.value || null);
@@ -317,9 +326,9 @@ export default function SpellEditorEdit({
                     />
                 </SyncFieldWrapper>
             </div>
-
+            
             {/* Limitations */}
-            <div className="border-b border-secondary/30 pb-3">
+            <div className="border-b border-secondary pb-3">
                 <h4 className="text-text-primary font-medium text-sm mb-3">{t('spellDetail.limitations')}</h4>
                 <SyncFieldWrapper
                     seriesElementId={spell.seriesSpellId}
@@ -328,10 +337,12 @@ export default function SpellEditorEdit({
                     bookElementId={spell.id || ''}
                     field="limitations"
                     elementType="spell"
-                    onDownload={function (): void { onSpellChange('limitations', seriesSpell?.limitations || null); }}
+                    onDownload={function (): void {
+                        onSpellChange('limitations', seriesSpell?.limitations || null);
+                    }}
                     onSyncComplete={onSyncComplete}
                 >
-                    <TexteAreaInput
+                    <TextAreaInput
                         value={spell.limitations || ''}
                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                             onSpellChange('limitations', e.target.value || null);
@@ -340,7 +351,7 @@ export default function SpellEditorEdit({
                     />
                 </SyncFieldWrapper>
             </div>
-
+            
             {/* Notes */}
             <div className="pb-3">
                 <h4 className="text-text-primary font-medium text-sm mb-3">{t('spellDetail.notes')}</h4>
@@ -351,10 +362,12 @@ export default function SpellEditorEdit({
                     bookElementId={spell.id || ''}
                     field="notes"
                     elementType="spell"
-                    onDownload={function (): void { onSpellChange('notes', seriesSpell?.notes || null); }}
+                    onDownload={function (): void {
+                        onSpellChange('notes', seriesSpell?.notes || null);
+                    }}
                     onSyncComplete={onSyncComplete}
                 >
-                    <TexteAreaInput
+                    <TextAreaInput
                         value={spell.notes || ''}
                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                             onSpellChange('notes', e.target.value || null);
diff --git a/components/book/settings/spells/editor/SpellEditorList.tsx b/components/book/settings/spells/editor/SpellEditorList.tsx
index 56ba6bf..681f9c3 100644
--- a/components/book/settings/spells/editor/SpellEditorList.tsx
+++ b/components/book/settings/spells/editor/SpellEditorList.tsx
@@ -1,12 +1,15 @@
 'use client';
 import React, {useState} from 'react';
-import {SpellListItem, SpellTagProps} from '@/lib/models/Spell';
+import {SpellListItem, SpellTagProps} from '@/lib/types/spell';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
 import SpellTagChip from '@/components/book/settings/spells/SpellTagChip';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronRight, faHatWizard, faPlus, faTags} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {Plus, Tag, Wand2} from 'lucide-react';
+import EntityListItem from '@/components/ui/EntityListItem';
+import AvatarIcon from '@/components/ui/AvatarIcon';
+import {useTranslations} from '@/lib/i18n';
+import IconContainer from '@/components/ui/IconContainer';
+import {dynamicBorderLeft} from '@/lib/utils/dynamicStyles';
 
 interface SpellEditorListProps {
     spells: SpellListItem[];
@@ -21,16 +24,16 @@ interface SpellEditorListProps {
  * Mêmes fonctionnalités que SpellSettingsList, layout condensé
  */
 export default function SpellEditorList({
-    spells,
-    tags,
-    onSpellClick,
-    onAddSpell,
-    onManageTags,
-}: SpellEditorListProps): React.JSX.Element {
+                                            spells,
+                                            tags,
+                                            onSpellClick,
+                                            onAddSpell,
+                                            onManageTags,
+                                        }: SpellEditorListProps): React.JSX.Element {
     const t = useTranslations();
     const [searchQuery, setSearchQuery] = useState<string>('');
     const [selectedTagId, setSelectedTagId] = useState<string | null>(null);
-
+    
     function getFilteredSpells(): SpellListItem[] {
         return spells.filter(function (spell: SpellListItem): boolean {
             const matchesSearch: boolean = spell.name.toLowerCase().includes(searchQuery.toLowerCase());
@@ -40,9 +43,9 @@ export default function SpellEditorList({
             return matchesSearch && matchesTag;
         });
     }
-
+    
     const filteredSpells: SpellListItem[] = getFilteredSpells();
-
+    
     return (
         <div className="space-y-3">
             <div className="px-2">
@@ -56,22 +59,24 @@ export default function SpellEditorList({
                             placeholder={t('spellList.search')}
                         />
                     }
-                    actionIcon={faPlus}
+                    actionIcon={Plus}
                     actionLabel={t('spellList.add')}
                     addButtonCallBack={async function (): Promise<void> {
                         onAddSpell();
                     }}
                 />
             </div>
-
+            
             {/* Tag filter + manage button */}
             <div className="px-2 flex items-center gap-2 flex-wrap">
                 <button
-                    onClick={function (): void { setSelectedTagId(null); }}
+                    onClick={function (): void {
+                        setSelectedTagId(null);
+                    }}
                     className={`px-2 py-1 text-xs rounded-full transition-colors ${
                         selectedTagId === null
-                            ? 'bg-primary text-white'
-                            : 'bg-secondary/50 text-text-secondary hover:bg-secondary'
+                            ? 'bg-primary text-text-primary'
+                            : 'bg-secondary text-text-secondary hover:bg-secondary'
                     }`}
                 >
                     {t('spellList.allTags')}
@@ -80,13 +85,14 @@ export default function SpellEditorList({
                     return (
                         <button
                             key={tag.id}
-                            onClick={function (): void { setSelectedTagId(tag.id === selectedTagId ? null : tag.id); }}
+                            onClick={function (): void {
+                                setSelectedTagId(tag.id === selectedTagId ? null : tag.id);
+                            }}
                             className={`px-2 py-1 text-xs rounded-full transition-colors ${
                                 selectedTagId === tag.id
-                                    ? 'bg-primary text-white'
-                                    : 'bg-secondary/50 text-text-secondary hover:bg-secondary'
-                            }`}
-                            style={selectedTagId === tag.id ? {} : {borderLeft: `3px solid ${tag.color}`}}
+                                    ? 'bg-primary text-text-primary'
+                                    : 'bg-secondary text-text-secondary hover:bg-secondary'
+                            } ${selectedTagId !== tag.id && tag.color ? dynamicBorderLeft(tag.color) : ''}`}
                         >
                             {tag.name}
                         </button>
@@ -94,19 +100,17 @@ export default function SpellEditorList({
                 })}
                 <button
                     onClick={onManageTags}
-                    className="px-2 py-1 text-xs rounded-full bg-secondary/30 text-text-secondary hover:bg-secondary transition-colors flex items-center gap-1"
+                    className="px-2 py-1 text-xs rounded-full bg-secondary text-text-secondary hover:bg-secondary transition-colors flex items-center gap-1"
                 >
-                    <FontAwesomeIcon icon={faTags} className="w-3 h-3"/>
+                    <Tag className="w-3 h-3" strokeWidth={1.75}/>
                     {t('spellList.manageTags')}
                 </button>
             </div>
-
+            
             <div className="px-2 space-y-2">
                 {filteredSpells.length === 0 ? (
                     <div className="flex flex-col items-center justify-center py-8 text-center">
-                        <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3">
-                            <FontAwesomeIcon icon={faHatWizard} className="text-primary w-8 h-8"/>
-                        </div>
+                        <IconContainer icon={Wand2} size="lg" shape="circle"/>
                         <h3 className="text-text-primary font-semibold text-base mb-1">
                             {t('spellList.noSpells')}
                         </h3>
@@ -117,43 +121,29 @@ export default function SpellEditorList({
                 ) : (
                     filteredSpells.map(function (spell: SpellListItem): React.JSX.Element {
                         return (
-                            <div
+                            <EntityListItem
                                 key={spell.id}
-                                onClick={function (): void { onSpellClick(spell); }}
-                                className="group flex items-center p-3 bg-secondary/30 rounded-lg border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md transition-all duration-200 hover:border-primary/50"
-                            >
-                                <div className="w-10 h-10 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-sm group-hover:scale-110 transition-transform flex items-center justify-center">
-                                    <FontAwesomeIcon icon={faHatWizard} className="text-primary w-5 h-5"/>
-                                </div>
-
-                                <div className="ml-3 flex-1 min-w-0">
-                                    <div className="text-text-primary font-semibold text-sm group-hover:text-primary transition-colors truncate">
-                                        {spell.name}
+                                size="sm"
+                                onClick={function (): void {
+                                    onSpellClick(spell);
+                                }}
+                                avatar={<AvatarIcon size="sm" icon={Wand2}/>}
+                                title={spell.name}
+                                subtitle={spell.description}
+                                extra={spell.tags.length > 0 ? (
+                                    <div className="flex flex-wrap gap-1">
+                                        {spell.tags.slice(0, 2).map(function (tag: SpellTagProps): React.JSX.Element {
+                                            return <SpellTagChip key={tag.id} tag={tag} size="sm"/>;
+                                        })}
+                                        {spell.tags.length > 2 && (
+                                            <span
+                                                className="text-muted text-xs px-1.5 py-0.5 bg-secondary rounded-full">
+                                                +{spell.tags.length - 2}
+                                            </span>
+                                        )}
                                     </div>
-                                    <div className="text-muted text-xs truncate">
-                                        {spell.description}
-                                    </div>
-                                    {spell.tags.length > 0 && (
-                                        <div className="flex flex-wrap gap-1 mt-1">
-                                            {spell.tags.slice(0, 2).map(function (tag: SpellTagProps): React.JSX.Element {
-                                                return <SpellTagChip key={tag.id} tag={tag} size="sm"/>;
-                                            })}
-                                            {spell.tags.length > 2 && (
-                                                <span className="text-muted text-xs px-1.5 py-0.5 bg-secondary/50 rounded-full">
-                                                    +{spell.tags.length - 2}
-                                                </span>
-                                            )}
-                                        </div>
-                                    )}
-                                </div>
-
-                                <div className="w-6 flex justify-center">
-                                    <FontAwesomeIcon
-                                        icon={faChevronRight}
-                                        className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-3 h-3"
-                                    />
-                                </div>
-                            </div>
+                                ) : undefined}
+                            />
                         );
                     })
                 )}
diff --git a/components/book/settings/spells/settings/SpellSettings.tsx b/components/book/settings/spells/settings/SpellSettings.tsx
index d0c7203..b9a8c28 100644
--- a/components/book/settings/spells/settings/SpellSettings.tsx
+++ b/components/book/settings/spells/settings/SpellSettings.tsx
@@ -1,18 +1,15 @@
 'use client';
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 import {useSpells, UseSpellsConfig} from '@/hooks/settings/useSpells';
-import {useTranslations} from 'next-intl';
-import {SpellEditState, SpellListItem, SpellTagProps} from '@/lib/models/Spell';
-import {SeriesSpellListItem} from '@/lib/models/Series';
-import {BookContext} from '@/context/BookContext';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
+import {useTranslations} from '@/lib/i18n';
+import {SpellEditState, SpellListItem} from '@/lib/types/spell';
+import {SeriesSpellListItem} from '@/lib/types/series';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import PulseLoader from '@/components/ui/PulseLoader';
 
 import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
-import InputField from '@/components/form/InputField';
-import ToggleSwitch from '@/components/form/ToggleSwitch';
 import SeriesImportSelector from '@/components/form/SeriesImportSelector';
-import AlertBox from '@/components/AlertBox';
+import AlertBox from '@/components/ui/AlertBox';
 import SpellTagManager from '@/components/book/settings/spells/SpellTagManager';
 
 import SpellSettingsList from './SpellSettingsList';
@@ -22,7 +19,7 @@ import SpellSettingsEdit from './SpellSettingsEdit';
 interface SpellSettingsProps {
     entityType?: 'book' | 'series';
     entityId?: string;
-    showToggle?: boolean;
+    toolEnabled?: boolean;
 }
 
 /**
@@ -31,23 +28,23 @@ interface SpellSettingsProps {
  * Inclut: toggle tool, import from series, tag manager
  */
 export default function SpellSettings({
-    entityType = 'book',
-    entityId,
-    showToggle = true,
-}: SpellSettingsProps): React.JSX.Element {
+                                          entityType = 'book',
+                                          entityId,
+                                          toolEnabled: parentToolEnabled,
+                                      }: SpellSettingsProps): React.JSX.Element {
     const t = useTranslations();
-    const {book} = useContext(BookContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
     const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
-
+    
     const resolvedEntityId: string = entityId || book?.bookId || '';
-
+    
     const config: UseSpellsConfig = useMemo(function (): UseSpellsConfig {
         return {
             entityType,
             entityId: resolvedEntityId,
         };
     }, [entityType, resolvedEntityId]);
-
+    
     const {
         spells,
         seriesSpells,
@@ -79,7 +76,7 @@ export default function SpellSettings({
         deleteTag,
         handleSyncComplete,
     } = useSpells(config);
-
+    
     const availableSeriesSpells = useMemo(function (): SeriesSpellListItem[] {
         return seriesSpells.filter(function (ss: SeriesSpellListItem): boolean {
             return !spells.some(function (s: SpellListItem): boolean {
@@ -87,19 +84,19 @@ export default function SpellSettings({
             });
         });
     }, [seriesSpells, spells]);
-
+    
     const handleSpellChange = useCallback(function (key: keyof SpellEditState, value: string | string[] | null): void {
         updateSpellField(key, value);
     }, [updateSpellField]);
-
+    
     async function handleSave(): Promise<void> {
         await exitEditMode(true);
     }
-
+    
     function handleCancel(): void {
         exitEditMode(false);
     }
-
+    
     async function handleDelete(): Promise<void> {
         if (selectedSpell?.id) {
             await deleteSpell(selectedSpell.id);
@@ -107,61 +104,50 @@ export default function SpellSettings({
             backToList();
         }
     }
-
+    
     if (isLoading) {
-        return (
-            <div className="flex items-center justify-center py-12">
-                <FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
-            </div>
-        );
+        return <PulseLoader/>;
     }
-
+    
     const isNew: boolean = selectedSpell?.id === null;
     const canExport: boolean = Boolean(bookSeriesId && selectedSpell?.id && !selectedSpell.seriesSpellId);
-
+    
     return (
         <div className="flex flex-col h-full">
-            {/* Header - uniquement pour detail/edit */}
+            {/* Header */}
             <ToolDetailHeader
-                title={selectedSpell?.name || ''}
-                defaultTitle={t('spellDetail.newSpell')}
-                viewMode={viewMode}
+                title={showTagManager ? t('spellTagManager.title') : (selectedSpell?.name || '')}
+                defaultTitle={showTagManager ? t('spellTagManager.title') : t('spellDetail.newSpell')}
+                viewMode={showTagManager ? 'detail' : viewMode}
                 isNew={isNew}
-                onBack={backToList}
-                onEdit={enterEditMode}
+                onBack={showTagManager ? function (): void {
+                    setShowTagManager(false);
+                } : backToList}
+                onEdit={showTagManager ? undefined : enterEditMode}
                 onSave={handleSave}
                 onCancel={handleCancel}
-                onDelete={function (): void { setShowDeleteConfirm(true); }}
-                onExport={canExport ? exportToSeries : undefined}
-                showExport={canExport}
-                showDelete={Boolean(selectedSpell?.id)}
+                onDelete={showTagManager ? undefined : function (): void {
+                    setShowDeleteConfirm(true);
+                }}
+                onExport={canExport && !showTagManager ? exportToSeries : undefined}
+                showExport={canExport && !showTagManager}
+                showDelete={!showTagManager && Boolean(selectedSpell?.id)}
             />
-
+            
             {/* Contenu principal */}
             <div className="flex-1 overflow-y-auto">
-                {viewMode === 'list' && (
+                {showTagManager && (
+                    <SpellTagManager
+                        tags={tags}
+                        onCreateTag={createTag}
+                        onUpdateTag={updateTag}
+                        onDeleteTag={deleteTag}
+                    />
+                )}
+                
+                {!showTagManager && viewMode === 'list' && (
                     <div className="space-y-5 p-4">
-                        {/* Toggle tool */}
-                        {showToggle && !isSeriesMode && (
-                            <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
-                                <InputField
-                                    icon={faToggleOn}
-                                    fieldName={t('spellComponent.enableTool')}
-                                    input={
-                                        <ToggleSwitch
-                                            checked={toolEnabled}
-                                            onChange={toggleTool}
-                                        />
-                                    }
-                                />
-                                <p className="text-muted text-sm mt-2">
-                                    {t('spellComponent.enableToolDescription')}
-                                </p>
-                            </div>
-                        )}
-
-                        {/* Contenu si outil activé */}
-                        {(toolEnabled || isSeriesMode) && (
+                        {((parentToolEnabled !== undefined ? parentToolEnabled : toolEnabled) || isSeriesMode) && (
                             <>
                                 {/* Import from series */}
                                 {!isSeriesMode && bookSeriesId && availableSeriesSpells.length > 0 && (
@@ -177,21 +163,23 @@ export default function SpellSettings({
                                         label={t('seriesImport.importFromSeries')}
                                     />
                                 )}
-
+                                
                                 {/* Liste des sorts */}
                                 <SpellSettingsList
                                     spells={spells}
                                     tags={tags}
                                     onSpellClick={enterDetailMode}
                                     onAddSpell={addNewSpell}
-                                    onManageTags={function (): void { setShowTagManager(true); }}
+                                    onManageTags={function (): void {
+                                        setShowTagManager(true);
+                                    }}
                                 />
                             </>
                         )}
                     </div>
                 )}
-
-                {viewMode === 'detail' && selectedSpell && (
+                
+                {!showTagManager && viewMode === 'detail' && selectedSpell && (
                     <div className="p-4">
                         <SpellSettingsDetail
                             spell={selectedSpell}
@@ -200,8 +188,8 @@ export default function SpellSettings({
                         />
                     </div>
                 )}
-
-                {viewMode === 'edit' && selectedSpell && (
+                
+                {!showTagManager && viewMode === 'edit' && selectedSpell && (
                     <div className="p-4">
                         <SpellSettingsEdit
                             spell={selectedSpell}
@@ -214,7 +202,7 @@ export default function SpellSettings({
                     </div>
                 )}
             </div>
-
+            
             {/* Modal de confirmation de suppression */}
             {showDeleteConfirm && selectedSpell?.id && (
                 <AlertBox
@@ -224,20 +212,12 @@ export default function SpellSettings({
                     confirmText={t('common.delete')}
                     cancelText={t('common.cancel')}
                     onConfirm={handleDelete}
-                    onCancel={function (): void { setShowDeleteConfirm(false); }}
-                />
-            )}
-
-            {/* Tag Manager Modal */}
-            {showTagManager && (
-                <SpellTagManager
-                    tags={tags}
-                    onBack={function (): void { setShowTagManager(false); }}
-                    onCreateTag={createTag}
-                    onUpdateTag={updateTag}
-                    onDeleteTag={deleteTag}
+                    onCancel={function (): void {
+                        setShowDeleteConfirm(false);
+                    }}
                 />
             )}
+            
         </div>
     );
 }
diff --git a/components/book/settings/spells/settings/SpellSettingsDetail.tsx b/components/book/settings/spells/settings/SpellSettingsDetail.tsx
index 8a5e55c..0329369 100644
--- a/components/book/settings/spells/settings/SpellSettingsDetail.tsx
+++ b/components/book/settings/spells/settings/SpellSettingsDetail.tsx
@@ -1,21 +1,14 @@
 'use client';
 import React from 'react';
-import {SpellEditState, spellPowerLevels, SpellTagProps} from '@/lib/models/Spell';
-import {SeriesSpellDetailResponse} from '@/lib/models/Series';
-import {SelectBoxProps} from '@/shared/interface';
+import {SpellEditState, SpellTagProps} from '@/lib/types/spell';
+import {spellPowerLevels} from '@/lib/constants/spell';
+import {SeriesSpellDetailResponse} from '@/lib/types/series';
+import {SelectBoxProps} from '@/components/form/SelectBox';
 import SpellTagChip from '@/components/book/settings/spells/SpellTagChip';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {
-    faBolt,
-    faEye,
-    faHatWizard,
-    faPuzzlePiece,
-    faStickyNote,
-    faTags,
-    faTriangleExclamation,
-    faWandMagicSparkles
-} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {AlertTriangle, Eye, Puzzle, StickyNote, Wand2, Zap} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import DetailHeroSection from '@/components/ui/DetailHeroSection';
+import DetailField from '@/components/ui/DetailField';
 
 interface SpellSettingsDetailProps {
     spell: SpellEditState;
@@ -24,18 +17,18 @@ interface SpellSettingsDetailProps {
 }
 
 export default function SpellSettingsDetail({
-    spell,
-    availableTags,
-    seriesSpell,
-}: SpellSettingsDetailProps): React.JSX.Element {
+                                                spell,
+                                                availableTags,
+                                                seriesSpell,
+                                            }: SpellSettingsDetailProps): React.JSX.Element {
     const t = useTranslations();
-
+    
     function getSelectedTags(): SpellTagProps[] {
         return availableTags.filter(function (tag: SpellTagProps): boolean {
             return spell.tags.includes(tag.id);
         });
     }
-
+    
     function getLocalizedPowerLevel(): string {
         if (!spell.powerLevel || spell.powerLevel === 'none') {
             return t('spellPowerLevels.none');
@@ -45,88 +38,57 @@ export default function SpellSettingsDetail({
         });
         return level ? t(level.label) : spell.powerLevel;
     }
-
+    
     function getPowerLevelColor(): string {
         switch (spell.powerLevel) {
-            case 'weak': return 'bg-green-500/20 text-green-400 border-green-500/30';
-            case 'moderate': return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
-            case 'strong': return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
-            case 'legendary': return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
-            default: return 'bg-secondary/50 text-text-secondary border-secondary/50';
+            case 'weak':
+                return 'bg-accent-green/20 text-accent-green border-accent-green/30';
+            case 'moderate':
+                return 'bg-accent-blue/20 text-accent-blue border-accent-blue/30';
+            case 'strong':
+                return 'bg-accent-orange/20 text-accent-orange border-accent-orange/30';
+            case 'legendary':
+                return 'bg-accent-purple/20 text-accent-purple border-accent-purple/30';
+            default:
+                return 'bg-secondary text-text-secondary border-secondary';
         }
     }
-
+    
     const selectedTags: SpellTagProps[] = getSelectedTags();
-
+    
     return (
         <div className="space-y-6 px-2 pb-4">
             {/* Hero Section */}
-            <div className="p-6 bg-gradient-to-r from-primary/10 via-secondary/20 to-transparent rounded-2xl border border-secondary/30">
-                <div className="flex items-start gap-4">
-                    <div className="w-16 h-16 rounded-xl bg-primary/20 flex items-center justify-center shrink-0">
-                        <FontAwesomeIcon icon={faWandMagicSparkles} className="w-8 h-8 text-primary"/>
-                    </div>
-                    <div className="flex-1 min-w-0">
-                        <h2 className="text-2xl font-bold text-text-primary">{spell.name || '—'}</h2>
-
-                        {/* Power Level Badge */}
-                        <div className="flex items-center gap-3 mt-3">
-                            <span className={`inline-flex items-center gap-2 px-3 py-1 rounded-lg text-sm border ${getPowerLevelColor()}`}>
-                                <FontAwesomeIcon icon={faBolt} className="w-3 h-3"/>
-                                {getLocalizedPowerLevel()}
-                            </span>
-                        </div>
-
-                        {/* Tags */}
-                        {selectedTags.length > 0 && (
-                            <div className="flex flex-wrap gap-2 mt-4">
-                                {selectedTags.map(function (tag: SpellTagProps): React.JSX.Element {
-                                    return <SpellTagChip key={tag.id} tag={tag}/>;
-                                })}
-                            </div>
-                        )}
-                    </div>
+            <DetailHeroSection icon={Wand2} title={spell.name || '—'}>
+                <div className="flex items-center gap-3 mt-3">
+                    <span
+                        className={`inline-flex items-center gap-2 px-3 py-1 rounded-lg text-sm border ${getPowerLevelColor()}`}>
+                        <Zap className="w-3 h-3" strokeWidth={1.75}/>
+                        {getLocalizedPowerLevel()}
+                    </span>
                 </div>
-            </div>
-
+                {selectedTags.length > 0 && (
+                    <div className="flex flex-wrap gap-2 mt-4">
+                        {selectedTags.map(function (tag: SpellTagProps): React.JSX.Element {
+                            return <SpellTagChip key={tag.id} tag={tag}/>;
+                        })}
+                    </div>
+                )}
+            </DetailHeroSection>
+            
             {/* Description & Appearance - Side by side */}
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
-                    <div className="flex items-center gap-2 mb-3">
-                        <FontAwesomeIcon icon={faHatWizard} className="w-4 h-4 text-primary"/>
-                        <h3 className="text-text-primary font-semibold">{t('spellDetail.description')}</h3>
-                    </div>
-                    <p className={`whitespace-pre-wrap ${spell.description ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
-                        {spell.description || '—'}
-                    </p>
-                </div>
-
-                <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
-                    <div className="flex items-center gap-2 mb-3">
-                        <FontAwesomeIcon icon={faEye} className="w-4 h-4 text-primary"/>
-                        <h3 className="text-text-primary font-semibold">{t('spellDetail.appearance')}</h3>
-                    </div>
-                    <p className={`whitespace-pre-wrap ${spell.appearance ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
-                        {spell.appearance || '—'}
-                    </p>
-                </div>
+                <DetailField icon={Wand2} label={t('spellDetail.description')} value={spell.description}/>
+                <DetailField icon={Eye} label={t('spellDetail.appearance')} value={spell.appearance}/>
             </div>
 
             {/* Components & Limitations - Side by side */}
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
-                    <div className="flex items-center gap-2 mb-3">
-                        <FontAwesomeIcon icon={faPuzzlePiece} className="w-4 h-4 text-primary"/>
-                        <h3 className="text-text-primary font-semibold">{t('spellDetail.components')}</h3>
-                    </div>
-                    <p className={`whitespace-pre-wrap ${spell.components ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
-                        {spell.components || '—'}
-                    </p>
-                </div>
+                <DetailField icon={Puzzle} label={t('spellDetail.components')} value={spell.components}/>
 
                 <div className="p-5 bg-error/10 rounded-xl border border-error/30">
                     <div className="flex items-center gap-2 mb-3">
-                        <FontAwesomeIcon icon={faTriangleExclamation} className="w-4 h-4 text-error"/>
+                        <AlertTriangle className="w-4 h-4 text-error" strokeWidth={1.75}/>
                         <h3 className="text-text-primary font-semibold">{t('spellDetail.limitations')}</h3>
                     </div>
                     <p className={`whitespace-pre-wrap ${spell.limitations ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
@@ -134,17 +96,9 @@ export default function SpellSettingsDetail({
                     </p>
                 </div>
             </div>
-
+            
             {/* Notes - Full width */}
-            <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
-                <div className="flex items-center gap-2 mb-3">
-                    <FontAwesomeIcon icon={faStickyNote} className="w-4 h-4 text-primary"/>
-                    <h3 className="text-text-primary font-semibold">{t('spellDetail.notes')}</h3>
-                </div>
-                <p className={`whitespace-pre-wrap ${spell.notes ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
-                    {spell.notes || '—'}
-                </p>
-            </div>
+            <DetailField icon={StickyNote} label={t('spellDetail.notes')} value={spell.notes}/>
         </div>
     );
 }
diff --git a/components/book/settings/spells/settings/SpellSettingsEdit.tsx b/components/book/settings/spells/settings/SpellSettingsEdit.tsx
index e9eaa78..5d77667 100644
--- a/components/book/settings/spells/settings/SpellSettingsEdit.tsx
+++ b/components/book/settings/spells/settings/SpellSettingsEdit.tsx
@@ -1,28 +1,19 @@
 'use client';
 import React, {useState} from 'react';
-import {defaultTagColors, SpellEditState, spellPowerLevels, SpellTagProps} from '@/lib/models/Spell';
-import {SeriesSpellDetailResponse} from '@/lib/models/Series';
-import {SelectBoxProps} from '@/shared/interface';
-import CollapsableArea from '@/components/CollapsableArea';
+import {SpellEditState, SpellTagProps} from '@/lib/types/spell';
+import {defaultTagColors, spellPowerLevels} from '@/lib/constants/spell';
+import {SeriesSpellDetailResponse} from '@/lib/types/series';
+import SelectBox, {SelectBoxProps} from '@/components/form/SelectBox';
+import Collapse from '@/components/ui/Collapse';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import TexteAreaInput from '@/components/form/TexteAreaInput';
-import SelectBox from '@/components/form/SelectBox';
+import TextAreaInput from '@/components/form/TextAreaInput';
 import SpellTagChip from '@/components/book/settings/spells/SpellTagChip';
 import SyncFieldWrapper from '@/components/form/SyncFieldWrapper';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {
-    faBolt,
-    faBook,
-    faEye,
-    faHatWizard,
-    faPlus,
-    faPuzzlePiece,
-    faStickyNote,
-    faTags,
-    faTriangleExclamation
-} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {AlertTriangle, Book, Eye, Plus, Puzzle, StickyNote, Tag, Wand2, Zap} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import {dynamicBg, dynamicBgWithOpacity, dynamicBorderWithOpacity, dynamicText} from '@/lib/utils/dynamicStyles';
+import Button from '@/components/ui/Button';
 
 interface SpellSettingsEditProps {
     spell: SpellEditState;
@@ -40,32 +31,32 @@ interface SpellSettingsEditProps {
  * PAS de scroll interne (géré par parent)
  */
 export default function SpellSettingsEdit({
-    spell,
-    availableTags,
-    onSpellChange,
-    onCreateTag,
-    seriesSpell,
-    onSyncComplete,
-}: SpellSettingsEditProps): React.JSX.Element {
+                                              spell,
+                                              availableTags,
+                                              onSpellChange,
+                                              onCreateTag,
+                                              seriesSpell,
+                                              onSyncComplete,
+                                          }: SpellSettingsEditProps): React.JSX.Element {
     const t = useTranslations();
-
+    
     const [tagSearchQuery, setTagSearchQuery] = useState<string>('');
     const [isCreatingTag, setIsCreatingTag] = useState<boolean>(false);
     const [newTagColor, setNewTagColor] = useState<string>(defaultTagColors[0]);
-
+    
     function handleAddTag(tagId: string): void {
         if (!spell.tags.includes(tagId)) {
             onSpellChange('tags', [...spell.tags, tagId]);
         }
         setTagSearchQuery('');
     }
-
+    
     function handleRemoveTag(tagId: string): void {
         onSpellChange('tags', spell.tags.filter(function (id: string): boolean {
             return id !== tagId;
         }));
     }
-
+    
     function getFilteredAvailableTags(): SpellTagProps[] {
         return availableTags.filter(function (tag: SpellTagProps): boolean {
             const notAlreadyAdded: boolean = !spell.tags.includes(tag.id);
@@ -73,13 +64,13 @@ export default function SpellSettingsEdit({
             return notAlreadyAdded && matchesSearch;
         });
     }
-
+    
     function getSelectedTags(): SpellTagProps[] {
         return availableTags.filter(function (tag: SpellTagProps): boolean {
             return spell.tags.includes(tag.id);
         });
     }
-
+    
     async function handleCreateTag(): Promise<void> {
         if (!tagSearchQuery.trim()) return;
         const newTag: SpellTagProps | null = await onCreateTag(tagSearchQuery.trim(), newTagColor);
@@ -89,7 +80,7 @@ export default function SpellSettingsEdit({
             setNewTagColor(defaultTagColors[0]);
         }
     }
-
+    
     function getLocalizedPowerLevels(): SelectBoxProps[] {
         return spellPowerLevels.map(function (level: SelectBoxProps): SelectBoxProps {
             return {
@@ -98,7 +89,7 @@ export default function SpellSettingsEdit({
             };
         });
     }
-
+    
     const filteredTags: SpellTagProps[] = getFilteredAvailableTags();
     const selectedTags: SpellTagProps[] = getSelectedTags();
     const showCreateOption: boolean = Boolean(
@@ -107,12 +98,11 @@ export default function SpellSettingsEdit({
             return tag.name.toLowerCase() === tagSearchQuery.toLowerCase();
         })
     );
-
+    
     return (
         <div className="space-y-4 px-2 pb-4">
             {/* Informations de base */}
-            <CollapsableArea title={t('spellDetail.basicInfo')} icon={faHatWizard}>
-                <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+            <Collapse variant="card" title={t('spellDetail.basicInfo')} icon={Wand2}>
                     <InputField
                         fieldName={t('spellDetail.name')}
                         input={
@@ -123,7 +113,9 @@ export default function SpellSettingsEdit({
                                 bookElementId={spell.id || ''}
                                 field="name"
                                 elementType="spell"
-                                onDownload={function (): void { onSpellChange('name', seriesSpell?.name || ''); }}
+                                onDownload={function (): void {
+                                    onSpellChange('name', seriesSpell?.name || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
                                 <TextInput
@@ -136,10 +128,10 @@ export default function SpellSettingsEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('spellDetail.description')}
-                        icon={faBook}
+                        icon={Book}
                         input={
                             <SyncFieldWrapper
                                 seriesElementId={spell.seriesSpellId}
@@ -148,10 +140,12 @@ export default function SpellSettingsEdit({
                                 bookElementId={spell.id || ''}
                                 field="description"
                                 elementType="spell"
-                                onDownload={function (): void { onSpellChange('description', seriesSpell?.description || ''); }}
+                                onDownload={function (): void {
+                                    onSpellChange('description', seriesSpell?.description || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
-                                <TexteAreaInput
+                                <TextAreaInput
                                     value={spell.description}
                                     setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                         onSpellChange('description', e.target.value);
@@ -161,10 +155,10 @@ export default function SpellSettingsEdit({
                             </SyncFieldWrapper>
                         }
                     />
-
+                    
                     <InputField
                         fieldName={t('spellDetail.appearance')}
-                        icon={faEye}
+                        icon={Eye}
                         input={
                             <SyncFieldWrapper
                                 seriesElementId={spell.seriesSpellId}
@@ -173,10 +167,12 @@ export default function SpellSettingsEdit({
                                 bookElementId={spell.id || ''}
                                 field="appearance"
                                 elementType="spell"
-                                onDownload={function (): void { onSpellChange('appearance', seriesSpell?.appearance || ''); }}
+                                onDownload={function (): void {
+                                    onSpellChange('appearance', seriesSpell?.appearance || '');
+                                }}
                                 onSyncComplete={onSyncComplete}
                             >
-                                <TexteAreaInput
+                                <TextAreaInput
                                     value={spell.appearance}
                                     setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                         onSpellChange('appearance', e.target.value);
@@ -186,12 +182,10 @@ export default function SpellSettingsEdit({
                             </SyncFieldWrapper>
                         }
                     />
-                </div>
-            </CollapsableArea>
+            </Collapse>
 
             {/* Tags */}
-            <CollapsableArea title={t('spellDetail.tags')} icon={faTags}>
-                <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+            <Collapse variant="card" title={t('spellDetail.tags')} icon={Tag}>
                     {selectedTags.length > 0 && (
                         <div className="flex flex-wrap gap-2 mb-3">
                             {selectedTags.map(function (tag: SpellTagProps): React.JSX.Element {
@@ -199,13 +193,15 @@ export default function SpellSettingsEdit({
                                     <SpellTagChip
                                         key={tag.id}
                                         tag={tag}
-                                        onRemove={function (): void { handleRemoveTag(tag.id); }}
+                                        onRemove={function (): void {
+                                            handleRemoveTag(tag.id);
+                                        }}
                                     />
                                 );
                             })}
                         </div>
                     )}
-
+                    
                     <TextInput
                         value={tagSearchQuery}
                         setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
@@ -213,43 +209,42 @@ export default function SpellSettingsEdit({
                         }}
                         placeholder={t('spellDetail.addTag')}
                     />
-
+                    
                     {filteredTags.length > 0 && (
                         <div className="flex flex-wrap gap-2">
                             {filteredTags.map(function (tag: SpellTagProps): React.JSX.Element {
                                 return (
                                     <button
                                         key={tag.id}
-                                        onClick={function (): void { handleAddTag(tag.id); }}
-                                        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm transition-all duration-200 hover:scale-105 hover:shadow-md border"
-                                        style={{
-                                            backgroundColor: `${tag.color || '#3B82F6'}20`,
-                                            borderColor: `${tag.color || '#3B82F6'}50`,
-                                            color: tag.color || '#3B82F6'
+                                        onClick={function (): void {
+                                            handleAddTag(tag.id);
                                         }}
+                                        className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm transition-colors duration-200 hover:brightness-110 border ${dynamicBgWithOpacity(tag.color || '#51AE84', '20')} ${dynamicBorderWithOpacity(tag.color || '#51AE84', '50')} ${dynamicText(tag.color || 'var(--color-primary)')}`}
                                     >
-                                        <FontAwesomeIcon icon={faPlus} className="w-3 h-3"/>
+                                        <Plus className="w-3 h-3" strokeWidth={1.75}/>
                                         {tag.name}
                                     </button>
                                 );
                             })}
                         </div>
                     )}
-
+                    
                     {showCreateOption && !isCreatingTag && (
                         <button
-                            onClick={function (): void { setIsCreatingTag(true); }}
-                            className="w-full flex items-center gap-2 px-4 py-2.5 bg-tertiary hover:bg-secondary/50 transition-colors text-left rounded-xl border border-secondary/50"
+                            onClick={function (): void {
+                                setIsCreatingTag(true);
+                            }}
+                            className="w-full flex items-center gap-2 px-4 py-2.5 bg-tertiary hover:bg-secondary transition-colors text-left rounded-xl border border-secondary"
                         >
-                            <FontAwesomeIcon icon={faPlus} className="text-primary w-3 h-3"/>
+                            <Plus className="text-primary w-3 h-3" strokeWidth={1.75}/>
                             <span className="text-primary font-medium">
                                 {t('spellDetail.createTag', {name: tagSearchQuery})}
                             </span>
                         </button>
                     )}
-
+                    
                     {isCreatingTag && (
-                        <div className="p-4 bg-tertiary rounded-xl border border-secondary/50">
+                        <div className="p-4 bg-tertiary rounded-xl border border-secondary">
                             <p className="text-text-secondary text-sm mb-3">
                                 {t('spellDetail.createTag', {name: tagSearchQuery})}
                             </p>
@@ -258,35 +253,30 @@ export default function SpellSettingsEdit({
                                     return (
                                         <button
                                             key={color}
-                                            onClick={function (): void { setNewTagColor(color); }}
-                                            className={`w-8 h-8 rounded-full transition-all duration-200 ${newTagColor === color ? 'ring-2 ring-offset-2 ring-primary scale-110' : 'hover:scale-110'}`}
-                                            style={{backgroundColor: color}}
+                                            onClick={function (): void {
+                                                setNewTagColor(color);
+                                            }}
+                                            className={`w-8 h-8 rounded-full transition-all duration-200 ${newTagColor === color ? 'ring-2 ring-offset-2 ring-primary' : 'hover:ring-1 hover:ring-primary/50'} ${dynamicBg(color)}`}
                                         />
                                     );
                                 })}
                             </div>
                             <div className="flex gap-2">
-                                <button
-                                    onClick={function (): void { setIsCreatingTag(false); }}
-                                    className="flex-1 py-2 px-3 bg-secondary/50 text-text-primary rounded-lg hover:bg-secondary transition-colors"
-                                >
+                                <Button variant="secondary" size="sm" onClick={function (): void {
+                                    setIsCreatingTag(false);
+                                }}>
                                     {t('common.cancel')}
-                                </button>
-                                <button
-                                    onClick={handleCreateTag}
-                                    className="flex-1 py-2 px-3 bg-primary text-text-primary rounded-lg hover:bg-primary-dark transition-colors"
-                                >
+                                </Button>
+                                <Button variant="primary" size="sm" onClick={handleCreateTag}>
                                     {t('common.confirm')}
-                                </button>
+                                </Button>
                             </div>
                         </div>
                     )}
-                </div>
-            </CollapsableArea>
+            </Collapse>
 
             {/* Niveau de puissance */}
-            <CollapsableArea title={t('spellDetail.powerLevel')} icon={faBolt}>
-                <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+            <Collapse variant="card" title={t('spellDetail.powerLevel')} icon={Zap}>
                     <SyncFieldWrapper
                         seriesElementId={spell.seriesSpellId}
                         seriesValue={seriesSpell?.powerLevel || 'none'}
@@ -294,7 +284,9 @@ export default function SpellSettingsEdit({
                         bookElementId={spell.id || ''}
                         field="powerLevel"
                         elementType="spell"
-                        onDownload={function (): void { onSpellChange('powerLevel', seriesSpell?.powerLevel || null); }}
+                        onDownload={function (): void {
+                            onSpellChange('powerLevel', seriesSpell?.powerLevel || null);
+                        }}
                         onSyncComplete={onSyncComplete}
                     >
                         <SelectBox
@@ -305,12 +297,10 @@ export default function SpellSettingsEdit({
                             data={getLocalizedPowerLevels()}
                         />
                     </SyncFieldWrapper>
-                </div>
-            </CollapsableArea>
+            </Collapse>
 
             {/* Composants */}
-            <CollapsableArea title={t('spellDetail.components')} icon={faPuzzlePiece}>
-                <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+            <Collapse variant="card" title={t('spellDetail.components')} icon={Puzzle}>
                     <SyncFieldWrapper
                         seriesElementId={spell.seriesSpellId}
                         seriesValue={seriesSpell?.components || ''}
@@ -318,10 +308,12 @@ export default function SpellSettingsEdit({
                         bookElementId={spell.id || ''}
                         field="components"
                         elementType="spell"
-                        onDownload={function (): void { onSpellChange('components', seriesSpell?.components || null); }}
+                        onDownload={function (): void {
+                            onSpellChange('components', seriesSpell?.components || null);
+                        }}
                         onSyncComplete={onSyncComplete}
                     >
-                        <TexteAreaInput
+                        <TextAreaInput
                             value={spell.components || ''}
                             setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                 onSpellChange('components', e.target.value || null);
@@ -329,12 +321,10 @@ export default function SpellSettingsEdit({
                             placeholder={t('spellDetail.componentsPlaceholder')}
                         />
                     </SyncFieldWrapper>
-                </div>
-            </CollapsableArea>
+            </Collapse>
 
             {/* Limitations */}
-            <CollapsableArea title={t('spellDetail.limitations')} icon={faTriangleExclamation}>
-                <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+            <Collapse variant="card" title={t('spellDetail.limitations')} icon={AlertTriangle}>
                     <SyncFieldWrapper
                         seriesElementId={spell.seriesSpellId}
                         seriesValue={seriesSpell?.limitations || ''}
@@ -342,10 +332,12 @@ export default function SpellSettingsEdit({
                         bookElementId={spell.id || ''}
                         field="limitations"
                         elementType="spell"
-                        onDownload={function (): void { onSpellChange('limitations', seriesSpell?.limitations || null); }}
+                        onDownload={function (): void {
+                            onSpellChange('limitations', seriesSpell?.limitations || null);
+                        }}
                         onSyncComplete={onSyncComplete}
                     >
-                        <TexteAreaInput
+                        <TextAreaInput
                             value={spell.limitations || ''}
                             setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                 onSpellChange('limitations', e.target.value || null);
@@ -353,12 +345,10 @@ export default function SpellSettingsEdit({
                             placeholder={t('spellDetail.limitationsPlaceholder')}
                         />
                     </SyncFieldWrapper>
-                </div>
-            </CollapsableArea>
-
+            </Collapse>
+            
             {/* Notes */}
-            <CollapsableArea title={t('spellDetail.notes')} icon={faStickyNote}>
-                <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+            <Collapse variant="card" title={t('spellDetail.notes')} icon={StickyNote}>
                     <SyncFieldWrapper
                         seriesElementId={spell.seriesSpellId}
                         seriesValue={seriesSpell?.notes || ''}
@@ -366,10 +356,12 @@ export default function SpellSettingsEdit({
                         bookElementId={spell.id || ''}
                         field="notes"
                         elementType="spell"
-                        onDownload={function (): void { onSpellChange('notes', seriesSpell?.notes || null); }}
+                        onDownload={function (): void {
+                            onSpellChange('notes', seriesSpell?.notes || null);
+                        }}
                         onSyncComplete={onSyncComplete}
                     >
-                        <TexteAreaInput
+                        <TextAreaInput
                             value={spell.notes || ''}
                             setValue={function (e: React.ChangeEvent<HTMLTextAreaElement>): void {
                                 onSpellChange('notes', e.target.value || null);
@@ -377,8 +369,7 @@ export default function SpellSettingsEdit({
                             placeholder={t('spellDetail.notesPlaceholder')}
                         />
                     </SyncFieldWrapper>
-                </div>
-            </CollapsableArea>
+            </Collapse>
         </div>
     );
 }
diff --git a/components/book/settings/spells/settings/SpellSettingsList.tsx b/components/book/settings/spells/settings/SpellSettingsList.tsx
index ad4fedb..158cf22 100644
--- a/components/book/settings/spells/settings/SpellSettingsList.tsx
+++ b/components/book/settings/spells/settings/SpellSettingsList.tsx
@@ -1,12 +1,16 @@
 'use client';
 import React, {useState} from 'react';
-import {SpellListItem, SpellTagProps} from '@/lib/models/Spell';
+import {SpellListItem, SpellTagProps} from '@/lib/types/spell';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
 import SpellTagChip from '@/components/book/settings/spells/SpellTagChip';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronRight, faCog, faHatWizard, faPlus} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {Plus, Settings, Wand2} from 'lucide-react';
+import EntityListItem from '@/components/ui/EntityListItem';
+import AvatarIcon from '@/components/ui/AvatarIcon';
+import {useTranslations} from '@/lib/i18n';
+import EmptyState from '@/components/ui/EmptyState';
+import Button from '@/components/ui/Button';
+import Badge from '@/components/ui/Badge';
 
 interface SpellSettingsListProps {
     spells: SpellListItem[];
@@ -22,16 +26,16 @@ interface SpellSettingsListProps {
  * PAS de scroll interne (géré par parent)
  */
 export default function SpellSettingsList({
-    spells,
-    tags,
-    onSpellClick,
-    onAddSpell,
-    onManageTags,
-}: SpellSettingsListProps): React.JSX.Element {
+                                              spells,
+                                              tags,
+                                              onSpellClick,
+                                              onAddSpell,
+                                              onManageTags,
+                                          }: SpellSettingsListProps): React.JSX.Element {
     const t = useTranslations();
     const [searchQuery, setSearchQuery] = useState<string>('');
     const [filterTag, setFilterTag] = useState<string>('all');
-
+    
     function getFilteredSpells(): SpellListItem[] {
         return spells.filter(function (spell: SpellListItem): boolean {
             const matchesSearch: boolean = spell.name.toLowerCase().includes(searchQuery.toLowerCase());
@@ -41,9 +45,9 @@ export default function SpellSettingsList({
             return matchesSearch && matchesTag;
         });
     }
-
+    
     const filteredSpells: SpellListItem[] = getFilteredSpells();
-
+    
     return (
         <div className="space-y-4">
             <div className="px-4 space-y-3">
@@ -57,13 +61,13 @@ export default function SpellSettingsList({
                             placeholder={t('spellList.search')}
                         />
                     }
-                    actionIcon={faPlus}
+                    actionIcon={Plus}
                     actionLabel={t('spellList.add')}
                     addButtonCallBack={async function (): Promise<void> {
                         onAddSpell();
                     }}
                 />
-
+                
                 <div className="flex flex-wrap gap-3 items-center">
                     <div className="flex-1 min-w-[150px]">
                         <select
@@ -71,7 +75,7 @@ export default function SpellSettingsList({
                             onChange={function (e: React.ChangeEvent<HTMLSelectElement>): void {
                                 setFilterTag(e.target.value);
                             }}
-                            className="w-full text-text-primary bg-secondary/50 hover:bg-secondary px-4 py-2.5 rounded-xl border border-secondary/50 focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary hover:border-secondary outline-none transition-all duration-200 cursor-pointer"
+                            className="input-base cursor-pointer"
                         >
                             <option value="all" className="bg-tertiary text-text-primary">
                                 {t('spellList.allTags')}
@@ -85,70 +89,43 @@ export default function SpellSettingsList({
                             })}
                         </select>
                     </div>
-                    <button
-                        onClick={onManageTags}
-                        className="flex items-center gap-2 px-4 py-2.5 bg-secondary/50 rounded-xl border border-secondary/50 hover:bg-secondary hover:border-secondary hover:shadow-md hover:scale-105 transition-all duration-200"
-                    >
-                        <FontAwesomeIcon icon={faCog} className="text-primary w-4 h-4"/>
-                        <span className="text-text-primary text-sm font-medium">{t('spellList.manageTags')}</span>
-                    </button>
+                    <Button variant="secondary" size="sm" icon={Settings} onClick={onManageTags}>
+                        {t('spellList.manageTags')}
+                    </Button>
                 </div>
             </div>
-
+            
             <div className="px-2">
                 {filteredSpells.length === 0 ? (
-                    <div className="flex flex-col items-center justify-center py-12 text-center">
-                        <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-4">
-                            <FontAwesomeIcon icon={faHatWizard} className="text-primary w-10 h-10"/>
-                        </div>
-                        <h3 className="text-text-primary font-semibold text-lg mb-2">
-                            {t('spellList.noSpells')}
-                        </h3>
-                        <p className="text-muted text-sm max-w-xs">
-                            {t('spellList.noSpellsDescription')}
-                        </p>
-                    </div>
+                    <EmptyState icon={Wand2} title={t('spellList.noSpells')}
+                                description={t('spellList.noSpellsDescription')}/>
                 ) : (
                     <div className="space-y-2 p-2">
                         {filteredSpells.map(function (spell: SpellListItem): React.JSX.Element {
                             return (
-                                <div
+                                <EntityListItem
                                     key={spell.id}
-                                    onClick={function (): void { onSpellClick(spell); }}
-                                    className="group flex items-center p-4 bg-secondary/30 rounded-xl border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md hover:scale-102 transition-all duration-200 hover:border-primary/50"
-                                >
-                                    <div className="w-12 h-12 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-md group-hover:scale-110 transition-transform flex items-center justify-center">
-                                        <FontAwesomeIcon icon={faHatWizard} className="text-primary w-6 h-6"/>
-                                    </div>
-
-                                    <div className="ml-4 flex-1 min-w-0">
-                                        <div className="text-text-primary font-bold text-base group-hover:text-primary transition-colors">
-                                            {spell.name}
-                                        </div>
-                                        <div className="text-text-secondary text-sm mt-0.5 truncate">
-                                            {spell.description}
-                                        </div>
-                                        {spell.tags.length > 0 && (
-                                            <div className="flex flex-wrap gap-1.5 mt-2">
+                                    onClick={function (): void {
+                                        onSpellClick(spell);
+                                    }}
+                                    avatar={<AvatarIcon icon={Wand2}/>}
+                                    title={spell.name}
+                                    subtitle={spell.description}
+                                    extra={
+                                        spell.tags.length > 0 ? (
+                                            <div className="flex flex-wrap gap-1.5">
                                                 {spell.tags.slice(0, 3).map(function (tag: SpellTagProps): React.JSX.Element {
                                                     return <SpellTagChip key={tag.id} tag={tag} size="sm"/>;
                                                 })}
                                                 {spell.tags.length > 3 && (
-                                                    <span className="text-muted text-xs px-2 py-0.5 bg-secondary/50 rounded-full">
+                                                    <Badge variant="muted" size="sm">
                                                         +{spell.tags.length - 3}
-                                                    </span>
+                                                    </Badge>
                                                 )}
                                             </div>
-                                        )}
-                                    </div>
-
-                                    <div className="w-8 flex justify-center">
-                                        <FontAwesomeIcon
-                                            icon={faChevronRight}
-                                            className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-4 h-4"
-                                        />
-                                    </div>
-                                </div>
+                                        ) : undefined
+                                    }
+                                />
                             );
                         })}
                     </div>
diff --git a/components/book/settings/story/Act.tsx b/components/book/settings/story/Act.tsx
index 9054c3d..0fb48a5 100644
--- a/components/book/settings/story/Act.tsx
+++ b/components/book/settings/story/Act.tsx
@@ -1,30 +1,21 @@
-import {Dispatch, SetStateAction, useContext, useState} from 'react';
-import {
-    faFire,
-    faFlag,
-    faPuzzlePiece,
-    faScaleBalanced,
-    faTrophy,
-    IconDefinition,
-} from '@fortawesome/free-solid-svg-icons';
-import {Act as ActType, Incident, PlotPoint} from '@/lib/models/Book';
-import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
-import System from '@/lib/models/System';
-import {BookContext} from '@/context/BookContext';
-import {SessionContext} from '@/context/SessionContext';
-import {AlertContext} from '@/context/AlertContext';
-import CollapsableArea from '@/components/CollapsableArea';
+import React, {Dispatch, SetStateAction, useContext, useState} from 'react';
+import {Flag, Flame, LucideIcon, Puzzle, Scale, Trophy} from 'lucide-react';
+import {Act as ActType, Incident, PlotPoint} from '@/lib/types/book';
+import {ActChapter, ChapterListProps} from '@/lib/types/chapter';
+import {apiDelete, apiPost} from '@/lib/api/client';
+import {isDesktop} from '@/lib/configs';
+import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
+import Collapse from '@/components/ui/Collapse';
 import ActDescription from '@/components/book/settings/story/act/ActDescription';
 import ActChaptersSection from '@/components/book/settings/story/act/ActChaptersSection';
 import ActIncidents from '@/components/book/settings/story/act/ActIncidents';
 import ActPlotPoints from '@/components/book/settings/story/act/ActPlotPoints';
-import {useTranslations} from 'next-intl';
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
-import * as tauri from '@/lib/tauri';
 
 interface ActProps {
     acts: ActType[];
@@ -34,14 +25,12 @@ interface ActProps {
 
 export default function Act({acts, setActs, mainChapters}: ActProps) {
     const t = useTranslations('actComponent');
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {book} = useContext(BookContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
+
     const bookId: string | undefined = book?.bookId;
     const token: string = session.accessToken;
     
@@ -77,24 +66,16 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
     
     async function addIncident(actId: number): Promise<void> {
         if (newIncidentTitle.trim() === '') return;
-
+        
         try {
             let incidentId: string;
-            if (isCurrentlyOffline() || book?.localBook) {
-                incidentId = await tauri.addIncident(bookId!, newIncidentTitle);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                incidentId = await tauri.addIncident(bookId ?? '', newIncidentTitle);
             } else {
-                incidentId = await System.authPostToServer<string>('book/incident/new', {
+                incidentId = await apiPost<string>('book/incident/new', {
                     bookId,
                     name: newIncidentTitle,
                 }, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('add_incident', {data: {
-                        bookId,
-                        incidentId,
-                        name: newIncidentTitle,
-                    }});
-                }
             }
             if (!incidentId) {
                 errorMessage(t('errorAddIncident'));
@@ -108,7 +89,7 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
                         summary: '',
                         chapters: [],
                     };
-
+                    
                     return {
                         ...act,
                         incidents: [...(act.incidents || []), newIncident],
@@ -130,15 +111,13 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
     async function deleteIncident(actId: number, incidentId: string): Promise<void> {
         try {
             let response: boolean;
-            const deleteData = { bookId, incidentId, deletedAt: System.timeStampInSeconds() };
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.removeIncident(deleteData.bookId!, deleteData.incidentId, deleteData.deletedAt);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.removeIncident(bookId ?? '', incidentId, Date.now());
             } else {
-                response = await System.authDeleteToServer<boolean>('book/incident/remove', deleteData, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('remove_incident', {data: deleteData});
-                }
+                response = await apiDelete<boolean>('book/incident/remove', {
+                    bookId,
+                    incidentId,
+                }, token, lang);
             }
             if (!response) {
                 errorMessage(t('errorDeleteIncident'));
@@ -169,22 +148,14 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
         if (newPlotPointTitle.trim() === '') return;
         try {
             let plotId: string;
-            const plotData = {
-                bookId,
-                name: newPlotPointTitle,
-                incidentId: selectedIncidentId,
-            };
-            if (isCurrentlyOffline() || book?.localBook) {
-                plotId = await tauri.addPlotPoint(plotData.bookId!, plotData.name, plotData.incidentId);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                plotId = await tauri.addPlotPoint(bookId ?? '', newPlotPointTitle, selectedIncidentId);
             } else {
-                plotId = await System.authPostToServer<string>('book/plot/new', plotData, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('add_plot_point', {data: {
-                        ...plotData,
-                        plotId,
-                    }});
-                }
+                plotId = await apiPost<string>('book/plot/new', {
+                    bookId,
+                    name: newPlotPointTitle,
+                    incidentId: selectedIncidentId,
+                }, token, lang);
             }
             if (!plotId) {
                 errorMessage(t('errorAddPlotPoint'));
@@ -221,15 +192,12 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
     async function deletePlotPoint(actId: number, plotPointId: string): Promise<void> {
         try {
             let response: boolean;
-            const deleteData = { plotId: plotPointId, bookId, deletedAt: System.timeStampInSeconds() };
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.removePlotPoint(deleteData.plotId, deleteData.bookId!, deleteData.deletedAt);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.removePlotPoint(plotPointId, bookId ?? '', Date.now());
             } else {
-                response = await System.authDeleteToServer<boolean>('book/plot/remove', deleteData, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('remove_plot_point', {data: deleteData});
-                }
+                response = await apiDelete<boolean>('book/plot/remove', {
+                    plotId: plotPointId,
+                }, token, lang);
             }
             if (!response) {
                 errorMessage(t('errorDeletePlotPoint'));
@@ -269,24 +237,22 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
         }
         try {
             let linkId: string;
-            const linkData = {
-                bookId,
-                chapterId: chapterId,
-                actId: actId,
-                plotId: destination === 'plotPoint' ? itemId : null,
-                incidentId: destination === 'incident' ? itemId : null,
-            };
-            if (isCurrentlyOffline() || book?.localBook) {
-                linkId = await tauri.addChapterInformation(linkData as any);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                linkId = await tauri.addChapterInformation({
+                    chapterId: chapterId,
+                    actId: actId,
+                    bookId: bookId ?? '',
+                    plotId: destination === 'plotPoint' ? itemId : undefined,
+                    incidentId: destination === 'incident' ? itemId : undefined,
+                });
             } else {
-                linkId = await System.authPostToServer<string>('chapter/resume/add', linkData, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('add_chapter_information', {data: {
-                        ...linkData,
-                        chapterInfoId: linkId,
-                    }});
-                }
+                linkId = await apiPost<string>('chapter/resume/add', {
+                    bookId,
+                    chapterId: chapterId,
+                    actId: actId,
+                    plotId: destination === 'plotPoint' ? itemId : null,
+                    incidentId: destination === 'incident' ? itemId : null,
+                }, token, lang);
             }
             if (!linkId) {
                 errorMessage(t('errorLinkChapter'));
@@ -363,15 +329,12 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
     ): Promise<void> {
         try {
             let response: boolean;
-            const unlinkData = { chapterInfoId, bookId, deletedAt: System.timeStampInSeconds() };
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.removeChapterInformation(unlinkData.chapterInfoId, unlinkData.bookId!, unlinkData.deletedAt);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.removeChapterInformation(chapterInfoId, bookId ?? '', Date.now());
             } else {
-                response = await System.authDeleteToServer<boolean>('chapter/resume/remove', unlinkData, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('remove_chapter_information', {data: unlinkData});
-                }
+                response = await apiDelete<boolean>('chapter/resume/remove', {
+                    chapterInfoId,
+                }, token, lang);
             }
             if (!response) {
                 errorMessage(t('errorUnlinkChapter'));
@@ -621,20 +584,20 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
         );
     }
     
-    function renderActIcon(actId: number): IconDefinition {
+    function renderActIcon(actId: number): LucideIcon {
         switch (actId) {
             case 1:
-                return faFlag;
+                return Flag;
             case 2:
-                return faFire;
+                return Flame;
             case 3:
-                return faPuzzlePiece;
+                return Puzzle;
             case 4:
-                return faScaleBalanced;
+                return Scale;
             case 5:
-                return faTrophy;
+                return Trophy;
             default:
-                return faFlag;
+                return Flag;
         }
     }
     
@@ -658,7 +621,7 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
     return (
         <div className="space-y-6">
             {acts.map((act: ActType) => (
-                <CollapsableArea key={`act-${act.id}`}
+                <Collapse variant="card" key={`act-${act.id}`}
                                  title={renderActTitle(act.id)}
                                  icon={renderActIcon(act.id)}
                                  children={
diff --git a/components/book/settings/story/Issue.tsx b/components/book/settings/story/Issue.tsx
index 2fb3336..93a921c 100644
--- a/components/book/settings/story/Issue.tsx
+++ b/components/book/settings/story/Issue.tsx
@@ -1,19 +1,19 @@
-import {ChangeEvent, useContext, useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faPlus, faTrash, faWarning,} from '@fortawesome/free-solid-svg-icons';
-import {Issue} from '@/lib/models/Book';
-import System from '@/lib/models/System';
-import {BookContext} from '@/context/BookContext';
-import {SessionContext} from '@/context/SessionContext';
-import {AlertContext} from '@/context/AlertContext';
-import CollapsableArea from "@/components/CollapsableArea";
-import {useTranslations} from "next-intl";
-import {LangContext, LangContextProps} from "@/context/LangContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
+import React, {ChangeEvent, useContext, useState} from 'react';
+import {AlertTriangle, Plus, Trash2} from 'lucide-react';
+import IconButton from "@/components/ui/IconButton";
+import {Issue} from '@/lib/types/book';
+import {apiDelete, apiPost} from '@/lib/api/client';
+import {isDesktop} from '@/lib/configs';
 import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
+import Collapse from "@/components/ui/Collapse";
+import TextInput from "@/components/form/TextInput";
+import InputField from "@/components/form/InputField";
+import {useTranslations} from '@/lib/i18n';
+import {LangContext, LangContextProps} from "@/context/LangContext";
 
 interface IssuesProps {
     issues: Issue[];
@@ -22,14 +22,12 @@ interface IssuesProps {
 
 export default function Issues({issues, setIssues}: IssuesProps) {
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {book} = useContext(BookContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage} = useContext(AlertContext);
-    
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
+
     const bookId: string | undefined = book?.bookId;
     const token: string = session.accessToken;
     
@@ -42,21 +40,13 @@ export default function Issues({issues, setIssues}: IssuesProps) {
         }
         try {
             let issueId: string;
-            if (isCurrentlyOffline() || book?.localBook) {
-                issueId = await tauri.addIssue(bookId!, newIssueName);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                issueId = await tauri.addIssue(bookId ?? '', newIssueName);
             } else {
-                issueId = await System.authPostToServer<string>('book/issue/add', {
+                issueId = await apiPost<string>('book/issue/add', {
                     bookId,
                     name: newIssueName,
                 }, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('add_issue', {data: {
-                        bookId,
-                        issueId,
-                        name: newIssueName,
-                    }});
-                }
             }
             if (!issueId) {
                 errorMessage(t("issues.errorAdd"));
@@ -66,7 +56,7 @@ export default function Issues({issues, setIssues}: IssuesProps) {
                 name: newIssueName,
                 id: issueId,
             };
-
+            
             setIssues([...issues, newIssue]);
             setNewIssueName('');
         } catch (e: unknown) {
@@ -81,33 +71,23 @@ export default function Issues({issues, setIssues}: IssuesProps) {
     async function deleteIssue(issueId: string): Promise<void> {
         if (issueId === undefined) {
             errorMessage(t("issues.errorInvalidId"));
-            return;
         }
-
+        
+        
         try {
             let response: boolean;
-            const deletedAt: number = System.timeStampInSeconds();
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.removeIssue(bookId!, issueId, deletedAt);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.removeIssue(bookId ?? '', issueId, Date.now());
             } else {
-                response = await System.authDeleteToServer<boolean>(
+                response = await apiDelete<boolean>(
                     'book/issue/remove',
                     {
                         bookId,
                         issueId,
-                        deletedAt,
                     },
                     token,
                     lang
                 );
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('remove_issue', {data: {
-                        bookId,
-                        issueId,
-                        deletedAt,
-                    }});
-                }
             }
             if (response) {
                 const updatedIssues: Issue[] = issues.filter((issue: Issue): boolean => issue.id !== issueId,);
@@ -135,51 +115,48 @@ export default function Issues({issues, setIssues}: IssuesProps) {
     }
     
     return (
-        <CollapsableArea title={t("issues.title")} children={
-            <div className="p-1">
+        <Collapse variant="card" title={t("issues.title")} icon={AlertTriangle}>
+            <div className="space-y-2">
                 {issues && issues.length > 0 ? (
-                    issues.map((item: Issue) => (
-                        <div
-                            className="mb-2 bg-secondary/30 rounded-xl p-3 shadow-sm hover:shadow-md transition-all duration-200"
-                            key={`issue-${item.id}`}
-                        >
-                            <div className="flex justify-between items-center">
-                                <input
-                                    className="flex-1 text-text-primary text-base px-2 py-1 bg-transparent border-b border-secondary/50 focus:outline-none focus:border-primary transition-colors duration-200 placeholder:text-muted/60"
-                                    value={item.name}
-                                    onChange={(e) => updateIssueName(item.id, e.target.value)}
-                                    placeholder={t("issues.issueNamePlaceholder")}
-                                />
-                                <button
-                                    className="p-1.5 ml-2 rounded-lg text-error hover:bg-error/20 hover:scale-110 transition-all duration-200"
-                                    onClick={() => deleteIssue(item.id)}
-                                >
-                                    <FontAwesomeIcon icon={faTrash} size="sm"/>
-                                </button>
+                    issues.map(function (item: Issue): React.JSX.Element {
+                        return (
+                            <div key={`issue-${item.id}`} className="flex items-center gap-2">
+                                <div className="flex-1">
+                                    <TextInput
+                                        value={item.name}
+                                        setValue={function (e: ChangeEvent<HTMLInputElement>): void {
+                                            updateIssueName(item.id, e.target.value);
+                                        }}
+                                        placeholder={t("issues.issueNamePlaceholder")}
+                                    />
+                                </div>
+                                <IconButton icon={Trash2} variant="danger" size="sm"
+                                            onClick={function (): Promise<void> {
+                                                return deleteIssue(item.id);
+                                            }}/>
                             </div>
-                        </div>
-                    ))
+                        );
+                    })
                 ) : (
                     <p className="text-text-secondary text-center py-2 text-sm">
                         {t("issues.noIssue")}
                     </p>
                 )}
-                <div className="flex items-center mt-3 bg-secondary/30 p-3 rounded-xl shadow-sm">
-                    <input
-                        className="flex-1 text-text-primary text-base px-2 py-1 bg-transparent border-b border-secondary/50 focus:outline-none focus:border-primary transition-colors duration-200 placeholder:text-muted/60"
-                        value={newIssueName}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) => setNewIssueName(e.target.value)}
-                        placeholder={t("issues.newIssuePlaceholder")}
-                    />
-                    <button
-                        className="bg-primary w-9 h-9 rounded-full flex justify-center items-center ml-2 text-text-primary shadow-md hover:shadow-lg hover:scale-110 hover:bg-primary-dark transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
-                        onClick={addNewIssue}
-                        disabled={newIssueName.trim() === ''}
-                    >
-                        <FontAwesomeIcon icon={faPlus}/>
-                    </button>
-                </div>
+                <InputField
+                    input={
+                        <TextInput
+                            value={newIssueName}
+                            setValue={function (e: ChangeEvent<HTMLInputElement>): void {
+                                setNewIssueName(e.target.value);
+                            }}
+                            placeholder={t("issues.newIssuePlaceholder")}
+                        />
+                    }
+                    actionIcon={Plus}
+                    addButtonCallBack={addNewIssue}
+                    isAddButtonDisabled={newIssueName.trim() === ''}
+                />
             </div>
-        } icon={faWarning}/>
+        </Collapse>
     );
 }
\ No newline at end of file
diff --git a/components/book/settings/story/MainChapter.tsx b/components/book/settings/story/MainChapter.tsx
index b8614f6..f33695e 100644
--- a/components/book/settings/story/MainChapter.tsx
+++ b/components/book/settings/story/MainChapter.tsx
@@ -1,22 +1,22 @@
 'use client'
 
-import {ChangeEvent, useContext, useEffect, useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faArrowDown, faArrowUp, faBookmark, faMinus, faPlus, faTrash,} from '@fortawesome/free-solid-svg-icons';
-import {ChapterListProps} from '@/lib/models/Chapter';
-import System from '@/lib/models/System';
-import {BookContext} from '@/context/BookContext';
-import {SessionContext} from '@/context/SessionContext';
-import {AlertContext} from '@/context/AlertContext';
-import AlertBox from "@/components/AlertBox";
-import CollapsableArea from "@/components/CollapsableArea";
-import {useTranslations} from "next-intl";
-import {LangContext} from "@/context/LangContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
+import React, {ChangeEvent, useContext, useEffect, useState} from 'react';
+import {ArrowDown, ArrowUp, Bookmark, Trash2} from 'lucide-react';
+import {ChapterListProps} from '@/lib/types/chapter';
+import {apiDelete, apiPost} from '@/lib/api/client';
+import {isDesktop} from '@/lib/configs';
 import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
+import AlertBox from "@/components/ui/AlertBox";
+import Collapse from "@/components/ui/Collapse";
+import IconButton from "@/components/ui/IconButton";
+import TextInput from "@/components/form/TextInput";
+import OrderInput from "@/components/form/OrderInput";
+import {useTranslations} from '@/lib/i18n';
+import {LangContext, LangContextProps} from "@/context/LangContext";
 
 interface MainChapterProps {
     chapters: ChapterListProps[];
@@ -25,14 +25,12 @@ interface MainChapterProps {
 
 export default function MainChapter({chapters, setChapters}: MainChapterProps) {
     const t = useTranslations();
-    const {lang} = useContext(LangContext)
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {book} = useContext(BookContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext)
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
+
     const bookId: string | undefined = book?.bookId;
     const token: string = session.accessToken;
     
@@ -87,20 +85,18 @@ export default function MainChapter({chapters, setChapters}: MainChapterProps) {
         try {
             setDeleteConfirmMessage(false);
             let response: boolean;
-            const deletedAt: number = System.timeStampInSeconds();
-            const deleteData = {
-                bookId,
-                chapterId: chapterIdToRemove,
-                deletedAt,
-            };
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.removeChapter(deleteData.chapterId, deleteData.bookId!, deleteData.deletedAt);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.removeChapter(chapterIdToRemove, bookId ?? '', Date.now());
             } else {
-                response = await System.authDeleteToServer<boolean>('chapter/remove', deleteData, token, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('remove_chapter', {data: deleteData});
-                }
+                response = await apiDelete<boolean>(
+                    'chapter/remove',
+                    {
+                        bookId,
+                        chapterId: chapterIdToRemove,
+                    },
+                    token,
+                    lang,
+                );
             }
             if (!response) {
                 errorMessage(t("mainChapter.errorDelete"));
@@ -120,33 +116,33 @@ export default function MainChapter({chapters, setChapters}: MainChapterProps) {
         if (newChapterTitle.trim() === '') {
             return;
         }
-
+        
         try {
             let responseId: string;
-            const chapterData = {
-                bookId: bookId,
-                wordsCount: 0,
-                chapterOrder: newChapterOrder ? newChapterOrder : 0,
-                title: newChapterTitle,
-            };
-            if (isCurrentlyOffline() || book?.localBook) {
-                responseId = await tauri.addChapter(chapterData);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                responseId = await tauri.addChapter({
+                    bookId: bookId ?? '',
+                    title: newChapterTitle,
+                    chapterOrder: newChapterOrder ? newChapterOrder : 0,
+                });
             } else {
-                responseId = await System.authPostToServer<string>('chapter/add', chapterData, token);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('add_chapter', {data: {
-                        ...chapterData,
-                        chapterId: responseId,
-                    }});
-                }
+                responseId = await apiPost<string>(
+                    'chapter/add',
+                    {
+                        bookId: bookId,
+                        wordsCount: 0,
+                        chapterOrder: newChapterOrder ? newChapterOrder : 0,
+                        title: newChapterTitle,
+                    },
+                    token,
+                );
             }
             if (!responseId) {
                 errorMessage(t("mainChapter.errorAdd"));
                 return;
             }
             const newChapter: ChapterListProps = {
-                chapterId: responseId as string,
+                chapterId: responseId,
                 title: newChapterTitle,
                 chapterOrder: newChapterOrder,
                 summary: '',
@@ -154,7 +150,7 @@ export default function MainChapter({chapters, setChapters}: MainChapterProps) {
             };
             setChapters([...chapters, newChapter]);
             setNewChapterTitle('');
-
+            
             setNewChapterOrder(newChapterOrder + 1);
         } catch (e: unknown) {
             if (e instanceof Error) {
@@ -165,16 +161,6 @@ export default function MainChapter({chapters, setChapters}: MainChapterProps) {
         }
     }
     
-    function decrementNewChapterOrder(): void {
-        if (newChapterOrder > 0) {
-            setNewChapterOrder(newChapterOrder - 1);
-        }
-    }
-    
-    function incrementNewChapterOrder(): void {
-        setNewChapterOrder(newChapterOrder + 1);
-    }
-    
     useEffect((): void => {
         const visibleChapters: ChapterListProps[] = chapters
             .filter((chapter: ChapterListProps): boolean => chapter.chapterOrder !== -1)
@@ -196,50 +182,48 @@ export default function MainChapter({chapters, setChapters}: MainChapterProps) {
     
     return (
         <div>
-            <CollapsableArea icon={faBookmark} title={t("mainChapter.chapters")} children={
+            <Collapse variant="card" icon={Bookmark} title={t("mainChapter.chapters")} children={
                 <div className="space-y-4">
                     {visibleChapters.length > 0 ? (
-                        <div>
+                        <div className="space-y-2">
                             {visibleChapters.map((item: ChapterListProps, index: number) => (
-                                <div key={item.chapterId}
-                                     className="mb-2 bg-secondary/30 rounded-xl p-3 shadow-sm hover:shadow-md transition-all duration-200">
-                                    <div className="flex items-center">
-                                <span
-                                    className="bg-primary-dark text-white text-sm w-6 h-6 rounded-full text-center leading-6 mr-2">
-                                  {item.chapterOrder !== undefined ? item.chapterOrder : index}
-                                </span>
-                                        <input
-                                            className="flex-1 text-text-primary text-base px-2 py-1 bg-transparent border-b border-secondary/50 focus:outline-none focus:border-primary transition-colors duration-200"
+                                <div key={item.chapterId} className="flex items-center gap-2">
+                                    <span
+                                        className="text-muted text-xs w-5 h-5 rounded-md bg-tertiary text-center leading-5 shrink-0">
+                                        {item.chapterOrder !== undefined ? item.chapterOrder : index}
+                                    </span>
+                                    <div className="flex-1">
+                                        <TextInput
                                             value={item.title}
-                                            onChange={(e: ChangeEvent<HTMLInputElement>) => handleChapterTitleChange(item.chapterId, e.target.value)}
+                                            setValue={function (e: ChangeEvent<HTMLInputElement>): void {
+                                                handleChapterTitleChange(item.chapterId, e.target.value);
+                                            }}
                                             placeholder={t("mainChapter.chapterTitlePlaceholder")}
                                         />
-                                        <div className="flex ml-1">
-                                            <button
-                                                className={`p-1.5 mx-0.5 rounded-lg hover:bg-secondary/50 transition-all duration-200 ${
-                                                    item.chapterOrder === 0 ? 'text-muted cursor-not-allowed' : 'text-primary hover:scale-110'
-                                                }`}
-                                                onClick={(): void => moveChapterUp(index)}
-                                                disabled={item.chapterOrder === 0}
-                                            >
-                                                <FontAwesomeIcon icon={faArrowUp} size="sm"/>
-                                            </button>
-                                            <button
-                                                className="p-1.5 mx-0.5 rounded-lg text-primary hover:bg-secondary/50 hover:scale-110 transition-all duration-200"
-                                                onClick={(): void => moveChapterDown(index)}
-                                            >
-                                                <FontAwesomeIcon icon={faArrowDown} size="sm"/>
-                                            </button>
-                                            <button
-                                                className="p-1.5 mx-0.5 rounded-lg text-error hover:bg-error/20 hover:scale-110 transition-all duration-200"
-                                                onClick={(): void => {
-                                                    setChapterIdToRemove(item.chapterId);
-                                                    setDeleteConfirmMessage(true);
-                                                }}
-                                            >
-                                                <FontAwesomeIcon icon={faTrash} size="sm"/>
-                                            </button>
-                                        </div>
+                                    </div>
+                                    <div className="flex shrink-0">
+                                        <IconButton
+                                            icon={ArrowUp}
+                                            variant="ghost"
+                                            size="sm"
+                                            onClick={(): void => moveChapterUp(index)}
+                                            disabled={item.chapterOrder === 0}
+                                        />
+                                        <IconButton
+                                            icon={ArrowDown}
+                                            variant="ghost"
+                                            size="sm"
+                                            onClick={(): void => moveChapterDown(index)}
+                                        />
+                                        <IconButton
+                                            icon={Trash2}
+                                            variant="danger"
+                                            size="sm"
+                                            onClick={(): void => {
+                                                setChapterIdToRemove(item.chapterId);
+                                                setDeleteConfirmMessage(true);
+                                            }}
+                                        />
                                     </div>
                                 </div>
                             ))}
@@ -250,44 +234,18 @@ export default function MainChapter({chapters, setChapters}: MainChapterProps) {
                         </p>
                     )}
                     
-                    <div className="bg-secondary/30 rounded-xl p-3 mt-3 shadow-sm">
-                        <div className="flex items-center">
-                            <div
-                                className="flex items-center gap-1 bg-secondary/50 rounded-lg mr-2 px-1 py-0.5 shadow-inner">
-                                <button
-                                    className={`w-6 h-6 rounded-full bg-secondary flex justify-center items-center hover:scale-110 transition-all duration-200 ${
-                                        newChapterOrder <= 0 ? 'text-muted cursor-not-allowed opacity-50' : 'text-primary hover:bg-secondary-dark'
-                                    }`}
-                                    onClick={decrementNewChapterOrder}
-                                    disabled={newChapterOrder <= 0}
-                                >
-                                    <FontAwesomeIcon icon={faMinus} size="xs"/>
-                                </button>
-                                <span
-                                    className="bg-primary-dark text-white text-sm w-6 h-6 rounded-full text-center leading-6 mx-0.5">
-                                  {newChapterOrder}
-                                </span>
-                                <button
-                                    className="w-6 h-6 rounded-full bg-secondary flex justify-center items-center text-primary hover:bg-secondary-dark hover:scale-110 transition-all duration-200"
-                                    onClick={incrementNewChapterOrder}
-                                >
-                                    <FontAwesomeIcon icon={faPlus} size="xs"/>
-                                </button>
-                            </div>
-                            <input
-                                className="flex-1 text-text-primary text-base px-2 py-1 bg-transparent border-b border-secondary/50 focus:outline-none focus:border-primary transition-colors duration-200 placeholder:text-muted/60"
-                                value={newChapterTitle}
-                                onChange={e => setNewChapterTitle(e.target.value)}
-                                placeholder={t("mainChapter.newChapterPlaceholder")}
-                            />
-                            <button
-                                className="bg-primary w-9 h-9 rounded-full flex justify-center items-center ml-2 text-text-primary shadow-md hover:shadow-lg hover:scale-110 hover:bg-primary-dark transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
-                                onClick={addNewChapter}
-                                disabled={newChapterTitle.trim() === ''}
-                            >
-                                <FontAwesomeIcon icon={faPlus} className={'w-5 h-5'}/>
-                            </button>
-                        </div>
+                    <div className="mt-3">
+                        <OrderInput
+                            value={newChapterTitle}
+                            setValue={function (e: ChangeEvent<HTMLInputElement>): void {
+                                setNewChapterTitle(e.target.value);
+                            }}
+                            order={newChapterOrder}
+                            setOrder={setNewChapterOrder}
+                            placeholder={t("mainChapter.newChapterPlaceholder")}
+                            onAdd={addNewChapter}
+                            isAddDisabled={newChapterTitle.trim() === ''}
+                        />
                     </div>
                 </div>
             }/>
diff --git a/components/book/settings/story/StorySetting.tsx b/components/book/settings/story/StorySetting.tsx
index d314416..6d77897 100644
--- a/components/book/settings/story/StorySetting.tsx
+++ b/components/book/settings/story/StorySetting.tsx
@@ -1,22 +1,21 @@
 'use client'
 
-import {createContext, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
-import {BookContext} from '@/context/BookContext';
-import {SessionContext} from '@/context/SessionContext';
-import {AlertContext} from '@/context/AlertContext';
-import System from '@/lib/models/System';
-import {Act as ActType, Issue} from '@/lib/models/Book';
-import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
+import React, {createContext, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
+import {apiGet, apiPost} from '@/lib/api/client';
+import {isDesktop} from '@/lib/configs';
+import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {Act as ActType, Incident, Issue, PlotPoint} from '@/lib/types/book';
+import {ActChapter, ChapterListProps} from '@/lib/types/chapter';
 import MainChapter from "@/components/book/settings/story/MainChapter";
 import Issues from "@/components/book/settings/story/Issue";
 import Act from "@/components/book/settings/story/Act";
-import {useTranslations} from "next-intl";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
-import * as tauri from '@/lib/tauri';
+import {SettingRef} from "@/lib/types/settings";
 
 export const StoryContext = createContext<{
     acts: ActType[];
@@ -43,24 +42,22 @@ interface StoryFetchData {
     issues: Issue[];
 }
 
-export function Story(props: any, ref: any) {
+export function Story(_props: object, ref: React.ForwardedRef<SettingRef>): React.JSX.Element {
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {book} = useContext(BookContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
     const bookId: string = book?.bookId ? book.bookId.toString() : '';
-    const {session} = useContext(SessionContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
     const userToken: string = session.accessToken;
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
+
     const [acts, setActs] = useState<ActType[]>([]);
     const [issues, setIssues] = useState<Issue[]>([]);
     const [mainChapters, setMainChapters] = useState<ChapterListProps[]>([]);
     const [isLoading, setIsLoading] = useState<boolean>(true);
     
-    useImperativeHandle(ref, function () {
+    useImperativeHandle(ref, function (): SettingRef {
         return {
             handleSave: handleSave
         };
@@ -77,10 +74,10 @@ export function Story(props: any, ref: any) {
     async function getStoryData(): Promise<void> {
         try {
             let response: StoryFetchData;
-            if (isCurrentlyOffline() || book?.localBook) {
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
                 response = await tauri.getBookStory(bookId) as StoryFetchData;
             } else {
-                response = await System.authGetQueryToServer<StoryFetchData>(`book/story`, userToken, lang, {
+                response = await apiGet<StoryFetchData>(`book/story`, userToken, lang, {
                     bookid: bookId,
                 });
             }
@@ -101,22 +98,22 @@ export function Story(props: any, ref: any) {
     }
     
     function cleanupDeletedChapters(): void {
-        const existingChapterIds: string[] = mainChapters.map(ch => ch.chapterId);
+        const existingChapterIds: string[] = mainChapters.map((ch: ChapterListProps): string => ch.chapterId);
         
-        const updatedActs = acts.map((act: ActType) => {
+        const updatedActs: ActType[] = acts.map((act: ActType): ActType => {
             const filteredChapters: ActChapter[] = act.chapters?.filter((chapter: ActChapter): boolean =>
                 existingChapterIds.includes(chapter.chapterId)) || [];
-            const updatedIncidents = act.incidents?.map(incident => {
+            const updatedIncidents: Incident[] = act.incidents?.map((incident: Incident): Incident => {
                 return {
                     ...incident,
-                    chapters: incident.chapters?.filter(chapter =>
+                    chapters: incident.chapters?.filter((chapter: ActChapter): boolean =>
                         existingChapterIds.includes(chapter.chapterId)) || []
                 };
             }) || [];
-            const updatedPlotPoints = act.plotPoints?.map(plotPoint => {
+            const updatedPlotPoints: PlotPoint[] = act.plotPoints?.map((plotPoint: PlotPoint): PlotPoint => {
                 return {
                     ...plotPoint,
-                    chapters: plotPoint.chapters?.filter(chapter =>
+                    chapters: plotPoint.chapters?.filter((chapter: ActChapter): boolean =>
                         existingChapterIds.includes(chapter.chapterId)) || []
                 };
             }) || [];
@@ -133,20 +130,20 @@ export function Story(props: any, ref: any) {
     async function handleSave(): Promise<void> {
         try {
             let response: boolean;
-            const storyData = {
-                bookId,
-                acts,
-                mainChapters,
-                issues,
-            };
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.updateBookStory(storyData);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.updateBookStory({
+                    bookId,
+                    acts,
+                    mainChapters,
+                    issues,
+                });
             } else {
-                response = await System.authPostToServer<boolean>('book/story', storyData, userToken, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
-                    addToQueue('update_book_story', {data: storyData});
-                }
+                response = await apiPost<boolean>('book/story', {
+                    bookId,
+                    acts,
+                    mainChapters,
+                    issues,
+                }, userToken, lang);
             }
             if (!response) {
                 errorMessage(t("story.errorSave"))
@@ -186,4 +183,4 @@ export function Story(props: any, ref: any) {
     );
 }
 
-export default forwardRef(Story);
\ No newline at end of file
+export default forwardRef<SettingRef, object>(Story);
\ No newline at end of file
diff --git a/components/book/settings/story/act/ActChapter.tsx b/components/book/settings/story/act/ActChapter.tsx
index 104dae0..8e320ab 100644
--- a/components/book/settings/story/act/ActChapter.tsx
+++ b/components/book/settings/story/act/ActChapter.tsx
@@ -1,9 +1,9 @@
-import {ChangeEvent} from 'react';
-import {faTrash} from '@fortawesome/free-solid-svg-icons';
-import {ActChapter} from '@/lib/models/Chapter';
+import React, {ChangeEvent} from 'react';
+import {Trash2} from 'lucide-react';
+import {ActChapter} from '@/lib/types/chapter';
 import InputField from '@/components/form/InputField';
-import TexteAreaInput from '@/components/form/TexteAreaInput';
-import {useTranslations} from 'next-intl';
+import TextAreaInput from '@/components/form/TextAreaInput';
+import {useTranslations} from '@/lib/i18n';
 
 interface ActChapterItemProps {
     chapter: ActChapter;
@@ -15,11 +15,10 @@ export default function ActChapterItem({chapter, onUpdateSummary, onUnlink}: Act
     const t = useTranslations('actComponent');
     
     return (
-        <div
-            className="bg-secondary/20 p-4 rounded-xl mb-3 border border-secondary/30 shadow-sm hover:shadow-md transition-all duration-200">
+        <div className="mb-3">
             <InputField
                 input={
-                    <TexteAreaInput
+                    <TextAreaInput
                         value={chapter.summary || ''}
                         setValue={(e: ChangeEvent<HTMLTextAreaElement>) =>
                             onUpdateSummary(chapter.chapterId, e.target.value)
@@ -27,7 +26,7 @@ export default function ActChapterItem({chapter, onUpdateSummary, onUnlink}: Act
                         placeholder={t('chapterSummaryPlaceholder')}
                     />
                 }
-                actionIcon={faTrash}
+                actionIcon={Trash2}
                 fieldName={chapter.title}
                 action={(): Promise<void> => onUnlink(chapter.chapterInfoId, chapter.chapterId)}
                 actionLabel={t('remove')}
diff --git a/components/book/settings/story/act/ActChaptersSection.tsx b/components/book/settings/story/act/ActChaptersSection.tsx
index 37f133c..f7c67cb 100644
--- a/components/book/settings/story/act/ActChaptersSection.tsx
+++ b/components/book/settings/story/act/ActChaptersSection.tsx
@@ -1,12 +1,10 @@
-import {useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons';
-import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
-import {SelectBoxProps} from '@/shared/interface';
+import React, {useState} from 'react';
+import {ActChapter, ChapterListProps} from '@/lib/types/chapter';
+import SelectBox, {SelectBoxProps} from '@/components/form/SelectBox';
 import ActChapterItem from './ActChapter';
 import InputField from '@/components/form/InputField';
-import SelectBox from '@/components/form/SelectBox';
-import {useTranslations} from 'next-intl';
+import Collapse from '@/components/ui/Collapse';
+import {useTranslations} from '@/lib/i18n';
 
 interface ActChaptersSectionProps {
     actId: number;
@@ -42,52 +40,45 @@ export default function ActChaptersSection({
     }
     
     return (
-        <div className="mb-4">
-            <button
-                className="flex justify-between items-center w-full bg-secondary/50 p-3 rounded-xl text-left hover:bg-secondary transition-all duration-200 shadow-sm"
-                onClick={(): void => onToggleSection(sectionKey)}
-            >
-                <span className="font-bold text-text-primary">{t('chapters')}</span>
-                <FontAwesomeIcon
-                    icon={isExpanded ? faChevronUp : faChevronDown}
-                    className="text-text-primary w-3.5 h-3.5"
-                />
-            </button>
-            
-            {isExpanded && (
-                <div className="p-2">
-                    {chapters && chapters.length > 0 ? (
-                        chapters.map((chapter: ActChapter) => (
+        <Collapse title={t('chapters')} defaultOpen={isExpanded}>
+            <div className="space-y-2">
+                {chapters && chapters.length > 0 ? (
+                    chapters.map(function (chapter: ActChapter): React.JSX.Element {
+                        return (
                             <ActChapterItem
                                 key={`chapter-${chapter.chapterInfoId}`}
                                 chapter={chapter}
-                                onUpdateSummary={(chapterId, summary) =>
-                                    onUpdateChapterSummary(chapterId, summary)
-                                }
-                                onUnlink={(chapterInfoId, chapterId) =>
-                                    onUnlinkChapter(chapterInfoId, chapterId)
-                                }
+                                onUpdateSummary={function (chapterId: string, summary: string): void {
+                                    onUpdateChapterSummary(chapterId, summary);
+                                }}
+                                onUnlink={function (chapterInfoId: string, chapterId: string): Promise<void> {
+                                    return onUnlinkChapter(chapterInfoId, chapterId);
+                                }}
                             />
-                        ))
-                    ) : (
-                        <p className="text-text-secondary text-center text-sm p-2">
-                            {t('noLinkedChapter')}
-                        </p>
-                    )}
-                    <InputField
-                        addButtonCallBack={(): Promise<void> => onLinkChapter(actId, selectedChapterId)}
-                        input={
-                            <SelectBox
-                                defaultValue={null}
-                                onChangeCallBack={(e) => setSelectedChapterId(e.target.value)}
-                                data={mainChaptersData()}
-                                placeholder={t('selectChapterPlaceholder')}
-                            />
-                        }
-                        isAddButtonDisabled={!selectedChapterId}
-                    />
-                </div>
-            )}
-        </div>
+                        );
+                    })
+                ) : (
+                    <p className="text-text-secondary text-center text-sm p-2">
+                        {t('noLinkedChapter')}
+                    </p>
+                )}
+                <InputField
+                    addButtonCallBack={function (): Promise<void> {
+                        return onLinkChapter(actId, selectedChapterId);
+                    }}
+                    input={
+                        <SelectBox
+                            defaultValue={null}
+                            onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
+                                setSelectedChapterId(e.target.value);
+                            }}
+                            data={mainChaptersData()}
+                            placeholder={t('selectChapterPlaceholder')}
+                        />
+                    }
+                    isAddButtonDisabled={!selectedChapterId}
+                />
+            </div>
+        </Collapse>
     );
 }
diff --git a/components/book/settings/story/act/ActDescription.tsx b/components/book/settings/story/act/ActDescription.tsx
index 7a5f5c3..46813d0 100644
--- a/components/book/settings/story/act/ActDescription.tsx
+++ b/components/book/settings/story/act/ActDescription.tsx
@@ -1,8 +1,8 @@
-import {ChangeEvent} from 'react';
-import {faTrash} from '@fortawesome/free-solid-svg-icons';
+import React, {ChangeEvent} from 'react';
+import {Trash2} from 'lucide-react';
 import InputField from '@/components/form/InputField';
-import TexteAreaInput from '@/components/form/TexteAreaInput';
-import {useTranslations} from 'next-intl';
+import TextAreaInput from '@/components/form/TextAreaInput';
+import {useTranslations} from '@/lib/i18n';
 
 interface ActDescriptionProps {
     actId: number;
@@ -44,7 +44,7 @@ export default function ActDescription({actId, summary, onUpdateSummary}: ActDes
             <InputField
                 fieldName={getActSummaryTitle(actId)}
                 input={
-                    <TexteAreaInput
+                    <TextAreaInput
                         value={summary || ''}
                         setValue={(e: ChangeEvent<HTMLTextAreaElement>) =>
                             onUpdateSummary(actId, e.target.value)
@@ -52,7 +52,7 @@ export default function ActDescription({actId, summary, onUpdateSummary}: ActDes
                         placeholder={getActSummaryPlaceholder(actId)}
                     />
                 }
-                actionIcon={faTrash}
+                actionIcon={Trash2}
                 actionLabel={t('delete')}
             />
         </div>
diff --git a/components/book/settings/story/act/ActIncidents.tsx b/components/book/settings/story/act/ActIncidents.tsx
index f20fc0c..d3a1f36 100644
--- a/components/book/settings/story/act/ActIncidents.tsx
+++ b/components/book/settings/story/act/ActIncidents.tsx
@@ -1,10 +1,14 @@
-import {useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronDown, faChevronUp, faPlus, faTrash} from '@fortawesome/free-solid-svg-icons';
-import {Incident} from '@/lib/models/Book';
-import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
+import React, {useState} from 'react';
+import {ChevronDown, ChevronUp, Plus, Trash2} from 'lucide-react';
+import {Incident} from '@/lib/types/book';
+import {ActChapter, ChapterListProps} from '@/lib/types/chapter';
 import ActChapterItem from './ActChapter';
-import {useTranslations} from 'next-intl';
+import IconButton from '@/components/ui/IconButton';
+import Collapse from '@/components/ui/Collapse';
+import SelectBox, {SelectBoxProps} from '@/components/form/SelectBox';
+import InputField from '@/components/form/InputField';
+import TextInput from '@/components/form/TextInput';
+import {useTranslations} from '@/lib/i18n';
 
 interface ActIncidentsProps {
     incidents: Incident[];
@@ -48,129 +52,120 @@ export default function ActIncidents({
         }));
     }
     
+    function mainChaptersData(): SelectBoxProps[] {
+        return mainChapters.map(function (chapter: ChapterListProps): SelectBoxProps {
+            return {
+                value: chapter.chapterId,
+                label: `${chapter.chapterOrder}. ${chapter.title}`,
+            };
+        });
+    }
+
     return (
-        <div className="mb-4">
-            <button
-                className="flex justify-between items-center w-full bg-secondary/50 p-3 rounded-xl text-left hover:bg-secondary transition-all duration-200 shadow-sm"
-                onClick={(): void => onToggleSection(sectionKey)}
-            >
-                <span className="font-bold text-text-primary">{t('incidentsTitle')}</span>
-                <FontAwesomeIcon
-                    icon={isExpanded ? faChevronUp : faChevronDown}
-                    className="text-text-primary w-3.5 h-3.5"
-                />
-            </button>
-            
-            {isExpanded && (
-                <div className="p-2">
-                    {incidents && incidents.length > 0 ? (
-                        <>
-                            {incidents.map((item: Incident) => {
-                                const itemKey = `incident_${item.incidentId}`;
-                                const isItemExpanded: boolean = expandedItems[itemKey];
-                                
-                                return (
-                                    <div
-                                        key={`incident-${item.incidentId}`}
-                                        className="bg-secondary/30 rounded-xl mb-3 overflow-hidden border border-secondary/40 shadow-sm hover:shadow-md transition-all duration-200"
-                                    >
-                                        <button
-                                            className="flex justify-between items-center w-full p-2 text-left"
-                                            onClick={(): void => toggleItem(itemKey)}
-                                        >
-                                            <span className="font-bold text-text-primary">{item.title}</span>
-                                            <div className="flex items-center">
-                                                <FontAwesomeIcon
-                                                    icon={isItemExpanded ? faChevronUp : faChevronDown}
-                                                    className="text-text-primary w-3.5 h-3.5 mr-2"
-                                                />
-                                                <button
-                                                    onClick={async (e) => {
-                                                        e.stopPropagation();
-                                                        await onDeleteIncident(actId, item.incidentId);
-                                                    }}
-                                                    className="text-error hover:bg-error/20 p-1.5 rounded-lg transition-all duration-200 hover:scale-110"
-                                                >
-                                                    <FontAwesomeIcon icon={faTrash} className="w-3.5 h-3.5"/>
-                                                </button>
-                                            </div>
-                                        </button>
-                                        
-                                        {isItemExpanded && (
-                                            <div className="p-3 bg-secondary/20">
-                                                {item.chapters && item.chapters.length > 0 ? (
-                                                    <>
-                                                        {item.chapters.map((chapter: ActChapter) => (
-                                                            <ActChapterItem
-                                                                key={`inc-chapter-${chapter.chapterId}-${chapter.chapterInfoId}`}
-                                                                chapter={chapter}
-                                                                onUpdateSummary={(chapterId, summary) =>
-                                                                    onUpdateChapterSummary(chapterId, summary, item.incidentId)
-                                                                }
-                                                                onUnlink={(chapterInfoId, chapterId) =>
-                                                                    onUnlinkChapter(chapterInfoId, chapterId, item.incidentId)
-                                                                }
-                                                            />
-                                                        ))}
-                                                    </>
-                                                ) : (
-                                                    <p className="text-text-secondary text-center text-sm p-2">
-                                                        {t('noLinkedChapter')}
-                                                    </p>
-                                                )}
-                                                
-                                                <div className="flex items-center mt-2">
-                                                    <select
-                                                        onChange={(e) => setSelectedChapterId(e.target.value)}
-                                                        className="flex-1 bg-secondary/50 text-text-primary rounded-xl px-4 py-2.5 mr-2 border border-secondary/50 focus:outline-none focus:ring-4 focus:ring-primary/20 focus:border-primary hover:bg-secondary hover:border-secondary transition-all duration-200"
-                                                    >
-                                                        <option value="">{t('selectChapterPlaceholder')}</option>
-                                                        {mainChapters.map((chapter: ChapterListProps) => (
-                                                            <option key={chapter.chapterId} value={chapter.chapterId}>
-                                                                {`${chapter.chapterOrder}. ${chapter.title}`}
-                                                            </option>
-                                                        ))}
-                                                    </select>
-                                                    <button
-                                                        className="bg-primary text-text-primary w-9 h-9 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg hover:scale-110 hover:bg-primary-dark transition-all duration-200"
-                                                        onClick={(): Promise<void> =>
-                                                            onLinkChapter(actId, selectedChapterId, item.incidentId)
-                                                        }
-                                                        disabled={selectedChapterId.length === 0}
-                                                    >
-                                                        <FontAwesomeIcon icon={faPlus} className="w-3.5 h-3.5"/>
-                                                    </button>
-                                                </div>
-                                            </div>
-                                        )}
+        <Collapse title={t('incidentsTitle')} defaultOpen={isExpanded}>
+            <div className="space-y-3">
+                {incidents && incidents.length > 0 ? (
+                    incidents.map(function (item: Incident): React.JSX.Element {
+                        const itemKey: string = `incident_${item.incidentId}`;
+                        const isItemExpanded: boolean = expandedItems[itemKey];
+                        
+                        return (
+                            <div key={`incident-${item.incidentId}`}
+                                 className="bg-secondary rounded-xl overflow-hidden">
+                                <button
+                                    className="flex justify-between items-center w-full p-3 text-left"
+                                    onClick={function (): void {
+                                        toggleItem(itemKey);
+                                    }}
+                                >
+                                    <span className="font-bold text-text-primary">{item.title}</span>
+                                    <div className="flex items-center gap-1">
+                                        {isItemExpanded
+                                            ? <ChevronUp className="text-primary w-3.5 h-3.5" strokeWidth={1.75}/>
+                                            : <ChevronDown className="text-primary w-3.5 h-3.5" strokeWidth={1.75}/>
+                                        }
+                                        <div onClick={function (e: React.MouseEvent): void {
+                                            e.stopPropagation();
+                                        }}>
+                                            <IconButton
+                                                icon={Trash2}
+                                                variant="danger"
+                                                size="sm"
+                                                onClick={async function (): Promise<void> {
+                                                    await onDeleteIncident(actId, item.incidentId);
+                                                }}
+                                            />
+                                        </div>
                                     </div>
-                                );
-                            })}
-                        </>
-                    ) : (
-                        <p className="text-text-secondary text-center text-sm p-2">
-                            {t('noIncidentAdded')}
-                        </p>
-                    )}
-                    
-                    <div className="flex items-center mt-2">
-                        <input
-                            type="text"
-                            className="flex-1 bg-secondary/50 text-text-primary rounded-xl px-4 py-2.5 mr-2 border border-secondary/50 focus:outline-none focus:ring-4 focus:ring-primary/20 focus:border-primary hover:bg-secondary hover:border-secondary transition-all duration-200 placeholder:text-muted/60"
+                                </button>
+                                
+                                {isItemExpanded && (
+                                    <div className="p-3">
+                                        {item.chapters && item.chapters.length > 0 ? (
+                                            item.chapters.map(function (chapter: ActChapter): React.JSX.Element {
+                                                return (
+                                                    <ActChapterItem
+                                                        key={`inc-chapter-${chapter.chapterId}-${chapter.chapterInfoId}`}
+                                                        chapter={chapter}
+                                                        onUpdateSummary={function (chapterId: string, summary: string): void {
+                                                            onUpdateChapterSummary(chapterId, summary, item.incidentId);
+                                                        }}
+                                                        onUnlink={function (chapterInfoId: string, chapterId: string): Promise<void> {
+                                                            return onUnlinkChapter(chapterInfoId, chapterId, item.incidentId);
+                                                        }}
+                                                    />
+                                                );
+                                            })
+                                        ) : (
+                                            <p className="text-text-secondary text-center text-sm p-2">
+                                                {t('noLinkedChapter')}
+                                            </p>
+                                        )}
+                                        
+                                        <InputField
+                                            input={
+                                                <SelectBox
+                                                    defaultValue={null}
+                                                    onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
+                                                        setSelectedChapterId(e.target.value);
+                                                    }}
+                                                    data={mainChaptersData()}
+                                                    placeholder={t('selectChapterPlaceholder')}
+                                                />
+                                            }
+                                            addButtonCallBack={function (): Promise<void> {
+                                                return onLinkChapter(actId, selectedChapterId, item.incidentId);
+                                            }}
+                                            isAddButtonDisabled={selectedChapterId.length === 0}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })
+                ) : (
+                    <p className="text-text-secondary text-center text-sm p-2">
+                        {t('noIncidentAdded')}
+                    </p>
+                )}
+                
+                <InputField
+                    input={
+                        <TextInput
                             value={newIncidentTitle}
-                            onChange={(e) => setNewIncidentTitle(e.target.value)}
+                            setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
+                                setNewIncidentTitle(e.target.value);
+                            }}
                             placeholder={t('newIncidentPlaceholder')}
                         />
-                        <button
-                            className="bg-primary text-text-primary w-9 h-9 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg hover:scale-110 hover:bg-primary-dark transition-all duration-200"
-                            onClick={(): Promise<void> => onAddIncident(actId)}
-                            disabled={newIncidentTitle.trim() === ''}
-                        >
-                            <FontAwesomeIcon icon={faPlus} className="w-3.5 h-3.5"/>
-                        </button>
-                    </div>
-                </div>
-            )}
-        </div>
+                    }
+                    actionIcon={Plus}
+                    addButtonCallBack={function (): Promise<void> {
+                        return onAddIncident(actId);
+                    }}
+                    isAddButtonDisabled={newIncidentTitle.trim() === ''}
+                />
+            </div>
+        </Collapse>
     );
 }
diff --git a/components/book/settings/story/act/ActPlotPoints.tsx b/components/book/settings/story/act/ActPlotPoints.tsx
index 42060d1..2ce3fdd 100644
--- a/components/book/settings/story/act/ActPlotPoints.tsx
+++ b/components/book/settings/story/act/ActPlotPoints.tsx
@@ -1,13 +1,14 @@
-import {useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronDown, faChevronUp, faPlus, faTrash} from '@fortawesome/free-solid-svg-icons';
-import {Incident, PlotPoint} from '@/lib/models/Book';
-import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
-import {SelectBoxProps} from '@/shared/interface';
+import React, {useState} from 'react';
+import {ChevronDown, ChevronUp, Plus, Trash2} from 'lucide-react';
+import {Incident, PlotPoint} from '@/lib/types/book';
+import {ActChapter, ChapterListProps} from '@/lib/types/chapter';
+import SelectBox, {SelectBoxProps} from '@/components/form/SelectBox';
 import ActChapterItem from './ActChapter';
 import InputField from '@/components/form/InputField';
-import SelectBox from '@/components/form/SelectBox';
-import {useTranslations} from 'next-intl';
+import TextInput from '@/components/form/TextInput';
+import IconButton from '@/components/ui/IconButton';
+import Collapse from '@/components/ui/Collapse';
+import {useTranslations} from '@/lib/i18n';
 
 interface ActPlotPointsProps {
     plotPoints: PlotPoint[];
@@ -65,138 +66,136 @@ export default function ActPlotPoints({
     }
     
     return (
-        <div className="mb-4">
-            <button
-                className="flex justify-between items-center w-full bg-secondary/50 p-3 rounded-xl text-left hover:bg-secondary transition-all duration-200 shadow-sm"
-                onClick={(): void => onToggleSection(sectionKey)}
-            >
-                <span className="font-bold text-text-primary">{t('plotPointsTitle')}</span>
-                <FontAwesomeIcon
-                    icon={isExpanded ? faChevronUp : faChevronDown}
-                    className="text-text-primary w-3.5 h-3.5"
-                />
-            </button>
-            
-            {isExpanded && (
-                <div className="p-2">
-                    {plotPoints && plotPoints.length > 0 ? (
-                        plotPoints.map((item: PlotPoint) => {
-                            const itemKey = `plotpoint_${item.plotPointId}`;
-                            const isItemExpanded: boolean = expandedItems[itemKey];
-                            const linkedIncident: Incident | undefined = incidents.find(
-                                (inc: Incident): boolean => inc.incidentId === item.linkedIncidentId
-                            );
-                            
-                            return (
-                                <div
-                                    key={`plot-point-${item.plotPointId}`}
-                                    className="bg-secondary/30 rounded-xl mb-3 overflow-hidden border border-secondary/40 shadow-sm hover:shadow-md transition-all duration-200"
+        <Collapse title={t('plotPointsTitle')} defaultOpen={isExpanded}>
+            <div className="space-y-3">
+                {plotPoints && plotPoints.length > 0 ? (
+                    plotPoints.map(function (item: PlotPoint): React.JSX.Element {
+                        const itemKey: string = `plotpoint_${item.plotPointId}`;
+                        const isItemExpanded: boolean = expandedItems[itemKey];
+                        const linkedIncident: Incident | undefined = incidents.find(
+                            function (inc: Incident): boolean {
+                                return inc.incidentId === item.linkedIncidentId;
+                            }
+                        );
+                        
+                        return (
+                            <div key={`plot-point-${item.plotPointId}`}
+                                 className="bg-secondary rounded-xl overflow-hidden">
+                                <button
+                                    className="flex justify-between items-center w-full p-3 text-left"
+                                    onClick={function (): void {
+                                        toggleItem(itemKey);
+                                    }}
                                 >
-                                    <button
-                                        className="flex justify-between items-center w-full p-2 text-left"
-                                        onClick={(): void => toggleItem(itemKey)}
-                                    >
-                                        <div>
-                                            <p className="font-bold text-text-primary">{item.title}</p>
-                                            {linkedIncident && (
-                                                <p className="text-text-secondary text-sm italic">
-                                                    {t('linkedTo')}: {linkedIncident.title}
-                                                </p>
-                                            )}
-                                        </div>
-                                        <div className="flex items-center">
-                                            <FontAwesomeIcon
-                                                icon={isItemExpanded ? faChevronUp : faChevronDown}
-                                                className="text-text-primary w-3.5 h-3.5 mr-2"
-                                            />
-                                            <button
-                                                onClick={async (e): Promise<void> => {
-                                                    e.stopPropagation();
+                                    <div>
+                                        <p className="font-bold text-text-primary">{item.title}</p>
+                                        {linkedIncident && (
+                                            <p className="text-text-secondary text-sm italic">
+                                                {t('linkedTo')}: {linkedIncident.title}
+                                            </p>
+                                        )}
+                                    </div>
+                                    <div className="flex items-center gap-1">
+                                        {isItemExpanded
+                                            ? <ChevronUp className="text-primary w-3.5 h-3.5" strokeWidth={1.75}/>
+                                            : <ChevronDown className="text-primary w-3.5 h-3.5" strokeWidth={1.75}/>
+                                        }
+                                        <div onClick={function (e: React.MouseEvent): void {
+                                            e.stopPropagation();
+                                        }}>
+                                            <IconButton
+                                                icon={Trash2}
+                                                variant="danger"
+                                                size="sm"
+                                                onClick={async function (): Promise<void> {
                                                     await onDeletePlotPoint(actId, item.plotPointId);
                                                 }}
-                                                className="text-error hover:bg-error/20 p-1.5 rounded-lg transition-all duration-200 hover:scale-110"
-                                            >
-                                                <FontAwesomeIcon icon={faTrash} className="w-3.5 h-3.5"/>
-                                            </button>
+                                            />
                                         </div>
-                                    </button>
-                                    
-                                    {isItemExpanded && (
-                                        <div className="p-3 bg-secondary/20">
-                                            {item.chapters && item.chapters.length > 0 ? (
-                                                item.chapters.map((chapter: ActChapter) => (
+                                    </div>
+                                </button>
+                                
+                                {isItemExpanded && (
+                                    <div className="p-3">
+                                        {item.chapters && item.chapters.length > 0 ? (
+                                            item.chapters.map(function (chapter: ActChapter): React.JSX.Element {
+                                                return (
                                                     <ActChapterItem
                                                         key={`plot-chapter-${chapter.chapterId}-${chapter.chapterInfoId}`}
                                                         chapter={chapter}
-                                                        onUpdateSummary={(chapterId, summary) =>
-                                                            onUpdateChapterSummary(chapterId, summary, item.plotPointId)
-                                                        }
-                                                        onUnlink={(chapterInfoId, chapterId) =>
-                                                            onUnlinkChapter(chapterInfoId, chapterId, item.plotPointId)
-                                                        }
+                                                        onUpdateSummary={function (chapterId: string, summary: string): void {
+                                                            onUpdateChapterSummary(chapterId, summary, item.plotPointId);
+                                                        }}
+                                                        onUnlink={function (chapterInfoId: string, chapterId: string): Promise<void> {
+                                                            return onUnlinkChapter(chapterInfoId, chapterId, item.plotPointId);
+                                                        }}
                                                     />
-                                                ))
-                                            ) : (
-                                                <p className="text-text-secondary text-center text-sm p-2">
-                                                    {t('noLinkedChapter')}
-                                                </p>
-                                            )}
-                                            
-                                            <div className="flex items-center mt-2">
-                                                <select
-                                                    onChange={(e) => setSelectedChapterId(e.target.value)}
-                                                    className="flex-1 bg-secondary/50 text-text-primary rounded-xl px-4 py-2.5 mr-2 border border-secondary/50 focus:outline-none focus:ring-4 focus:ring-primary/20 focus:border-primary hover:bg-secondary hover:border-secondary transition-all duration-200"
-                                                >
-                                                    <option value="">{t('selectChapterPlaceholder')}</option>
-                                                    {mainChapters.map((chapter: ChapterListProps) => (
-                                                        <option key={chapter.chapterId} value={chapter.chapterId}>
-                                                            {`${chapter.chapterOrder}. ${chapter.title}`}
-                                                        </option>
-                                                    ))}
-                                                </select>
-                                                <button
-                                                    className="bg-primary text-text-primary w-9 h-9 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg hover:scale-110 hover:bg-primary-dark transition-all duration-200"
-                                                    onClick={() => onLinkChapter(actId, selectedChapterId, item.plotPointId)}
-                                                    disabled={!selectedChapterId}
-                                                >
-                                                    <FontAwesomeIcon icon={faPlus} className="w-3.5 h-3.5"/>
-                                                </button>
-                                            </div>
-                                        </div>
-                                    )}
-                                </div>
-                            );
-                        })
-                    ) : (
-                        <p className="text-text-secondary text-center text-sm p-2">
-                            {t('noPlotPointAdded')}
-                        </p>
-                    )}
-                    
-                    <div className="mt-2 space-y-2">
-                        <div className="flex items-center">
-                            <input
-                                type="text"
-                                className="flex-1 bg-secondary/50 text-text-primary rounded-xl px-4 py-2.5 border border-secondary/50 focus:outline-none focus:ring-4 focus:ring-primary/20 focus:border-primary hover:bg-secondary hover:border-secondary transition-all duration-200 placeholder:text-muted/60"
-                                value={newPlotPointTitle}
-                                onChange={(e) => setNewPlotPointTitle(e.target.value)}
-                                placeholder={t('newPlotPointPlaceholder')}
+                                                );
+                                            })
+                                        ) : (
+                                            <p className="text-text-secondary text-center text-sm p-2">
+                                                {t('noLinkedChapter')}
+                                            </p>
+                                        )}
+                                        
+                                        <InputField
+                                            input={
+                                                <SelectBox
+                                                    onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
+                                                        setSelectedChapterId(e.target.value);
+                                                    }}
+                                                    data={mainChapters.map(function (chapter: ChapterListProps): SelectBoxProps {
+                                                        return {
+                                                            label: `${chapter.chapterOrder}. ${chapter.title}`,
+                                                            value: chapter.chapterId,
+                                                        };
+                                                    })}
+                                                    defaultValue={selectedChapterId}
+                                                    placeholder={t('selectChapterPlaceholder')}
+                                                />
+                                            }
+                                            addButtonCallBack={function (): Promise<void> {
+                                                return onLinkChapter(actId, selectedChapterId, item.plotPointId);
+                                            }}
+                                            isAddButtonDisabled={!selectedChapterId}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })
+                ) : (
+                    <p className="text-text-secondary text-center text-sm p-2">
+                        {t('noPlotPointAdded')}
+                    </p>
+                )}
+                
+                <div className="space-y-2">
+                    <TextInput
+                        value={newPlotPointTitle}
+                        setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
+                            setNewPlotPointTitle(e.target.value);
+                        }}
+                        placeholder={t('newPlotPointPlaceholder')}
+                    />
+                    <InputField
+                        input={
+                            <SelectBox
+                                defaultValue=""
+                                onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
+                                    setSelectedIncidentId(e.target.value);
+                                }}
+                                data={getIncidentData()}
                             />
-                        </div>
-                        <InputField
-                            input={
-                                <SelectBox
-                                    defaultValue={``}
-                                    onChangeCallBack={(e) => setSelectedIncidentId(e.target.value)}
-                                    data={getIncidentData()}
-                                />
-                            }
-                            addButtonCallBack={(): Promise<void> => onAddPlotPoint(actId)}
-                            isAddButtonDisabled={newPlotPointTitle.trim() === ''}
-                        />
-                    </div>
+                        }
+                        actionIcon={Plus}
+                        addButtonCallBack={function (): Promise<void> {
+                            return onAddPlotPoint(actId);
+                        }}
+                        isAddButtonDisabled={newPlotPointTitle.trim() === ''}
+                    />
                 </div>
-            )}
-        </div>
+            </div>
+        </Collapse>
     );
 }
diff --git a/components/book/settings/world/WorldElement.tsx b/components/book/settings/world/WorldElement.tsx
index ce9bba1..7a2985c 100644
--- a/components/book/settings/world/WorldElement.tsx
+++ b/components/book/settings/world/WorldElement.tsx
@@ -1,225 +1,185 @@
-'use client';
-
-import {ChangeEvent, useContext, useState} from "react";
-import {WorldContext} from "@/context/WorldContext";
-import TextInput from "@/components/form/TextInput";
-import TexteAreaInput from "@/components/form/TexteAreaInput";
-import {WorldElement, WorldProps} from "@/lib/models/World";
-import {AlertContext} from "@/context/AlertContext";
-import {SessionContext} from "@/context/SessionContext";
-import System from "@/lib/models/System";
-import InputField from "@/components/form/InputField";
-import {useTranslations} from "next-intl";
-import {LangContext, LangContextProps} from "@/context/LangContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {BookContext} from "@/context/BookContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
-import {SeriesContext, SeriesContextProps} from "@/context/SeriesContext";
-import {SeriesSyncContext, SeriesSyncContextProps} from "@/context/SeriesSyncContext";
-import {SyncedSeries} from "@/lib/models/SyncedSeries";
-import * as tauri from '@/lib/tauri';
-
-interface WorldElementInputProps {
-    sectionLabel: string;
-    sectionType: string;
-}
-
-function getElementTypeNumber(sectionType: string): number {
-    const typeMap: { [key: string]: number } = {
-        'laws': 0,
-        'biomes': 1,
-        'issues': 2,
-        'customs': 3,
-        'kingdoms': 4,
-        'climate': 5,
-        'resources': 6,
-        'wildlife': 7,
-        'arts': 8,
-        'ethnicGroups': 9,
-        'socialClasses': 10,
-        'importantCharacters': 11,
-    };
-    return typeMap[sectionType] ?? 0;
-}
-
-export default function WorldElementComponent({sectionLabel, sectionType}: WorldElementInputProps) {
-    const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {book} = useContext(BookContext);
-    const {worlds, setWorlds, selectedWorldIndex, isSeriesMode} = useContext(WorldContext);
-    const {errorMessage} = useContext(AlertContext);
-    const {session} = useContext(SessionContext);
-    const {seriesId, localSeries} = useContext<SeriesContextProps>(SeriesContext);
-    const {localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
-    
-    const [newElementName, setNewElementName] = useState<string>('');
-    
-    async function handleRemoveElement(
-        section: keyof WorldProps,
-        index: number,
-    ): Promise<void> {
-        try {
-            let response: boolean;
-            const elementId = (worlds[selectedWorldIndex][section] as WorldElement[])[index].id;
-            const deletedAt: number = System.timeStampInSeconds();
-            if (isSeriesMode) {
-                const deleteData = {elementId, deletedAt};
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.deleteSeriesWorldElement(elementId, deletedAt);
-                } else {
-                    response = await System.authDeleteToServer<boolean>('series/world/element/delete', deleteData, session.accessToken, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                        addToQueue('delete_series_world_element', {data: deleteData});
-                    }
-                }
-            } else if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.removeWorldElement(elementId, book?.bookId || '', deletedAt);
-            } else {
-                response = await System.authDeleteToServer<boolean>('book/world/element/delete', {
-                    elementId, bookId: book?.bookId, deletedAt,
-                }, session.accessToken, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === book?.bookId)) {
-                    addToQueue('remove_world_element', {data: {
-                        elementId: elementId, bookId: book?.bookId, deletedAt,
-                    }});
-                }
-            }
-            if (!response) {
-                errorMessage(t("worldSetting.unknownError"))
-            }
-            const updatedWorlds: WorldProps[] = [...worlds];
-            (updatedWorlds[selectedWorldIndex][section] as WorldElement[]).splice(
-                index,
-                1,
-            );
-            setWorlds(updatedWorlds);
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.toString());
-            } else {
-                errorMessage(t("worldElementComponent.errorUnknown"));
-            }
-        }
-    }
-    
-    async function handleAddElement(section: keyof WorldProps): Promise<void> {
-        if (newElementName.trim() === '') {
-            errorMessage(t("worldElementComponent.emptyField", {section: sectionLabel}));
-            return;
-        }
-        try {
-            let elementId: string;
-            if (isSeriesMode) {
-                const addData = {
-                    worldId: worlds[selectedWorldIndex].id,
-                    elementType: getElementTypeNumber(section as string),
-                    name: newElementName,
-                };
-                if (isCurrentlyOffline() || localSeries) {
-                    elementId = await tauri.addSeriesWorldElement(addData);
-                } else {
-                    elementId = await System.authPostToServer<string>(
-                        'series/world/element/add',
-                        addData,
-                        session.accessToken,
-                        lang
-                    );
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                        addToQueue('add_series_world_element', {data: addData});
-                    }
-                }
-                if (!elementId) {
-                    errorMessage(t("worldSetting.unknownError"))
-                    return;
-                }
-            } else if (isCurrentlyOffline() || book?.localBook) {
-                elementId = await tauri.addWorldElement(worlds[selectedWorldIndex].id, newElementName, section as string);
-            } else {
-                elementId = await System.authPostToServer('book/world/element/add', {
-                    elementType: section,
-                    worldId: worlds[selectedWorldIndex].id,
-                    elementName: newElementName,
-                }, session.accessToken, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === book?.bookId)) {
-                    addToQueue('add_world_element', {data: {
-                        elementType: section,
-                        worldId: worlds[selectedWorldIndex].id,
-                        elementId,
-                        elementName: newElementName,
-                    }});
-                }
-            }
-            if (!elementId) {
-                errorMessage(t("worldSetting.unknownError"))
-                return;
-            }
-            const updatedWorlds: WorldProps[] = [...worlds];
-            (updatedWorlds[selectedWorldIndex][section] as WorldElement[]).push({
-                id: elementId,
-                name: newElementName,
-                description: '',
-            });
-            setWorlds(updatedWorlds);
-            setNewElementName('');
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t("worldElementComponent.errorUnknown"));
-            }
-        }
-    }
-    
-    function handleElementChange(
-        section: keyof WorldProps,
-        index: number,
-        field: keyof WorldElement,
-        value: string,
-    ): void {
-        const updatedWorlds: WorldProps[] = [...worlds];
-        const sectionElements = updatedWorlds[selectedWorldIndex][
-            section
-            ] as WorldElement[];
-        sectionElements[index] = {...sectionElements[index], [field]: value};
-        setWorlds(updatedWorlds);
-    }
-    
-    return (
-        <div className="space-y-4">
-            {Array.isArray(worlds[selectedWorldIndex][sectionType as keyof WorldProps]) &&
-                (worlds[selectedWorldIndex][sectionType as keyof WorldProps] as WorldElement[]).map(
-                    (element: WorldElement, index: number) => (
-                        <div key={element.id}
-                             className="bg-secondary/30 rounded-xl p-4 border-l-4 border-primary shadow-sm hover:shadow-md transition-all duration-200">
-                            <div className="mb-2">
-                                <InputField input={<TextInput
-                                    value={element.name}
-                                    setValue={(e: ChangeEvent<HTMLInputElement>) => handleElementChange(sectionType as keyof WorldProps, index, 'name', e.target.value)}
-                                    placeholder={t("worldElementComponent.namePlaceholder", {section: sectionLabel.toLowerCase()})}
-                                />}
-                                            removeButtonCallBack={(): Promise<void> => handleRemoveElement(sectionType as keyof WorldProps, index)}/>
-                            </div>
-                            <TexteAreaInput
-                                value={element.description}
-                                setValue={(e) => handleElementChange(sectionType as keyof WorldProps, index, 'description', e.target.value)}
-                                placeholder={t("worldElementComponent.descriptionPlaceholder", {section: sectionLabel.toLowerCase()})}
-                            />
-                        </div>
-                    )
-                )
-            }
-            <InputField input={<TextInput
-                value={newElementName}
-                setValue={(e: ChangeEvent<HTMLInputElement>): void => setNewElementName(e.target.value)}
-                placeholder={t("worldElementComponent.newPlaceholder", {section: sectionLabel.toLowerCase()})}
-            />} addButtonCallBack={(): Promise<void> => handleAddElement(sectionType as keyof WorldProps)}/>
-        </div>
-    );
-}
\ No newline at end of file
+'use client';
+
+import React, {ChangeEvent, useContext, useState} from "react";
+import {WorldContext, WorldContextProps} from "@/context/WorldContext";
+import TextInput from "@/components/form/TextInput";
+import TextAreaInput from "@/components/form/TextAreaInput";
+import {WorldElement, WorldElementSection, WorldProps} from "@/lib/types/world";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {apiDelete, apiPost} from "@/lib/api/client";
+import {isDesktop} from '@/lib/configs';
+import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import InputField from "@/components/form/InputField";
+import {useTranslations} from '@/lib/i18n';
+import {LangContext, LangContextProps} from "@/context/LangContext";
+
+interface WorldElementInputProps {
+    sectionLabel: string;
+    sectionType: WorldElementSection;
+}
+
+function getElementTypeNumber(sectionType: WorldElementSection): number {
+    const typeMap: Record<WorldElementSection, number> = {
+        'laws': 0,
+        'biomes': 1,
+        'issues': 2,
+        'customs': 3,
+        'kingdoms': 4,
+        'climate': 5,
+        'resources': 6,
+        'wildlife': 7,
+        'arts': 8,
+        'ethnicGroups': 9,
+        'socialClasses': 10,
+        'importantCharacters': 11,
+    };
+    return typeMap[sectionType] ?? 0;
+}
+
+export default function WorldElementComponent({sectionLabel, sectionType}: WorldElementInputProps): React.JSX.Element {
+    const t = useTranslations();
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {
+        worlds,
+        setWorlds,
+        selectedWorldIndex,
+        isSeriesMode
+    }: WorldContextProps = useContext<WorldContextProps>(WorldContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
+
+    const [newElementName, setNewElementName] = useState<string>('');
+
+    async function handleRemoveElement(
+        section: WorldElementSection,
+        index: number,
+    ): Promise<void> {
+        try {
+            const elements: WorldElement[] = worlds[selectedWorldIndex][section];
+            let response: boolean;
+            if (!isSeriesMode && isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.removeWorldElement(elements[index].id, book?.bookId ?? '', Date.now());
+            } else {
+                const endpoint: string = isSeriesMode ? 'series/world/element/delete' : 'book/world/element/delete';
+                response = await apiDelete<boolean>(endpoint, {
+                    elementId: elements[index].id,
+                }, session.accessToken, lang);
+            }
+            if (!response) {
+                errorMessage(t("worldSetting.unknownError"))
+            }
+            const updatedWorlds: WorldProps[] = [...worlds];
+            updatedWorlds[selectedWorldIndex][section].splice(index, 1);
+            setWorlds(updatedWorlds);
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t("worldElementComponent.errorUnknown"));
+            }
+        }
+    }
+    
+    async function handleAddElement(section: WorldElementSection): Promise<void> {
+        if (newElementName.trim() === '') {
+            errorMessage(t("worldElementComponent.emptyField", {section: sectionLabel}));
+            return;
+        }
+        try {
+            let elementId: string;
+            if (isSeriesMode) {
+                elementId = await apiPost<string>(
+                    'series/world/element/add',
+                    {
+                        worldId: worlds[selectedWorldIndex].id,
+                        elementType: getElementTypeNumber(section),
+                        name: newElementName,
+                    },
+                    session.accessToken,
+                    lang
+                );
+                if (!elementId) {
+                    errorMessage(t("worldSetting.unknownError"))
+                    return;
+                }
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                elementId = await tauri.addWorldElement(worlds[selectedWorldIndex].id, newElementName, section);
+                if (!elementId) {
+                    errorMessage(t("worldSetting.unknownError"))
+                    return;
+                }
+            } else {
+                elementId = await apiPost<string>('book/world/element/add', {
+                    elementType: section,
+                    worldId: worlds[selectedWorldIndex].id,
+                    elementName: newElementName,
+                }, session.accessToken, lang);
+                if (!elementId) {
+                    errorMessage(t("worldSetting.unknownError"))
+                    return;
+                }
+            }
+            const updatedWorlds: WorldProps[] = [...worlds];
+            updatedWorlds[selectedWorldIndex][section].push({
+                id: elementId,
+                name: newElementName,
+                description: '',
+            });
+            setWorlds(updatedWorlds);
+            setNewElementName('');
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t("worldElementComponent.errorUnknown"));
+            }
+        }
+    }
+
+    function handleElementChange(
+        section: WorldElementSection,
+        index: number,
+        field: keyof WorldElement,
+        value: string,
+    ): void {
+        const updatedWorlds: WorldProps[] = [...worlds];
+        const sectionElements: WorldElement[] = updatedWorlds[selectedWorldIndex][section];
+        sectionElements[index] = {...sectionElements[index], [field]: value};
+        setWorlds(updatedWorlds);
+    }
+    
+    return (
+        <div className="space-y-4">
+            {worlds[selectedWorldIndex][sectionType].map(
+                (element: WorldElement, index: number): React.JSX.Element => (
+                    <div key={element.id}
+                         className="bg-secondary rounded-xl p-4 border-l-4 border-primary transition-colors duration-200">
+                        <div className="mb-2">
+                            <InputField input={<TextInput
+                                value={element.name}
+                                setValue={(e: ChangeEvent<HTMLInputElement>): void => handleElementChange(sectionType, index, 'name', e.target.value)}
+                                placeholder={t("worldElementComponent.namePlaceholder", {section: sectionLabel.toLowerCase()})}
+                            />}
+                                        removeButtonCallBack={(): Promise<void> => handleRemoveElement(sectionType, index)}/>
+                        </div>
+                        <TextAreaInput
+                            value={element.description}
+                            setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => handleElementChange(sectionType, index, 'description', e.target.value)}
+                            placeholder={t("worldElementComponent.descriptionPlaceholder", {section: sectionLabel.toLowerCase()})}
+                        />
+                    </div>
+                )
+            )}
+            <InputField input={<TextInput
+                value={newElementName}
+                setValue={(e: ChangeEvent<HTMLInputElement>): void => setNewElementName(e.target.value)}
+                placeholder={t("worldElementComponent.newPlaceholder", {section: sectionLabel.toLowerCase()})}
+            />} addButtonCallBack={(): Promise<void> => handleAddElement(sectionType)}/>
+        </div>
+    );
+}
diff --git a/components/book/settings/world/WorldSetting.tsx b/components/book/settings/world/WorldSetting.tsx
index cc0b456..a1be506 100644
--- a/components/book/settings/world/WorldSetting.tsx
+++ b/components/book/settings/world/WorldSetting.tsx
@@ -1,36 +1,29 @@
 'use client'
 import React, {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faPlus, faShare, faToggleOn, IconDefinition} from "@fortawesome/free-solid-svg-icons";
+import {LucideIcon, Plus, Share2, ToggleRight} from 'lucide-react';
 import {WorldContext} from '@/context/WorldContext';
-import {BookContext} from "@/context/BookContext";
-import {AlertContext} from "@/context/AlertContext";
-import {SelectBoxProps} from "@/shared/interface";
-import System from "@/lib/models/System";
-import {elementSections, WorldListResponse, WorldProps} from "@/lib/models/World";
-import {SessionContext} from "@/context/SessionContext";
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import SelectBox, {SelectBoxProps} from "@/components/form/SelectBox";
+import {apiGet, apiPatch, apiPost} from "@/lib/api/client";
+import {isDesktop} from '@/lib/configs';
+import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {ElementSection, WorldListResponse, WorldProps, WorldTextField} from "@/lib/types/world";
+import {SettingRef} from "@/lib/types/settings";
+import {elementSections} from "@/lib/constants/world";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
 import InputField from "@/components/form/InputField";
 import TextInput from '@/components/form/TextInput';
-import TexteAreaInput from "@/components/form/TexteAreaInput";
+import TextAreaInput from "@/components/form/TextAreaInput";
 import WorldElementComponent from './WorldElement';
-import SelectBox from "@/components/form/SelectBox";
-import {useTranslations} from "next-intl";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
 import ToggleSwitch from "@/components/form/ToggleSwitch";
-import {SeriesWorldProps, SeriesWorldListItem} from "@/lib/models/Series";
+import {SeriesWorldListItem, SeriesWorldProps} from "@/lib/types/series";
 import SeriesImportSelector from "@/components/form/SeriesImportSelector";
 import SyncFieldWrapper from "@/components/form/SyncFieldWrapper";
-import * as tauri from '@/lib/tauri';
-
-export interface ElementSection {
-    title: string;
-    section: keyof WorldProps;
-    icon: IconDefinition;
-}
+import Button from "@/components/ui/Button";
 
 interface WorldSettingProps {
     showToggle?: boolean;
@@ -38,16 +31,14 @@ interface WorldSettingProps {
     entityId?: string;
 }
 
-export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSave: () => Promise<void> }>) {
+export function WorldSetting(props: WorldSettingProps, ref: React.ForwardedRef<SettingRef>): React.JSX.Element {
     const {showToggle = true, entityType = 'book', entityId} = props;
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {session} = useContext(SessionContext);
-    const {book, setBook} = useContext(BookContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {book, setBook}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
 
     const currentEntityId: string = entityId || book?.bookId || '';
     const isSeriesMode: boolean = entityType === 'series';
@@ -60,29 +51,27 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
     const [showAddNewWorld, setShowAddNewWorld] = useState<boolean>(false);
     const [toolEnabled, setToolEnabled] = useState<boolean>(isSeriesMode ? true : (book?.tools?.worlds ?? false));
     const bookSeriesId: string | null = book?.seriesId || null;
-
-    useImperativeHandle(ref, function () {
-        return {
-            handleSave: handleUpdateWorld,
-        };
-    });
+    
+    useImperativeHandle(ref, (): SettingRef => ({
+        handleSave: handleUpdateWorld,
+    }));
 
     useEffect((): void => {
         if (currentEntityId) {
             getWorlds().then();
         }
     }, [currentEntityId]);
-
+    
     useEffect((): void => {
-        if (bookSeriesId && !isSeriesMode && !isCurrentlyOffline()) {
+        if (bookSeriesId && !isSeriesMode) {
             getSeriesWorlds().then();
         }
     }, [bookSeriesId]);
-
+    
     async function getSeriesWorlds(): Promise<void> {
-        if (!bookSeriesId || isCurrentlyOffline()) return;
+        if (!bookSeriesId) return;
         try {
-            const response: SeriesWorldProps[] = await System.authGetQueryToServer<SeriesWorldProps[]>('series/world/list', session.accessToken, lang, {
+            const response: SeriesWorldProps[] = await apiGet<SeriesWorldProps[]>('series/world/list', session.accessToken, lang, {
                 seriesid: bookSeriesId
             });
             if (response) {
@@ -90,7 +79,7 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
             }
         } catch (e: unknown) {
             if (e instanceof Error) {
-                console.error('Error loading series worlds:', e.message);
+                errorMessage(e.message);
             }
         }
     }
@@ -99,21 +88,14 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
         if (isSeriesMode) return;
         try {
             let response: boolean;
-            if (isCurrentlyOffline() || book?.localBook) {
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
                 response = await tauri.updateBookToolSetting(currentEntityId, 'worlds', enabled);
             } else {
-                response = await System.authPatchToServer<boolean>('book/tool-setting', {
+                response = await apiPatch<boolean>('book/tool-setting', {
                     bookId: currentEntityId,
                     toolName: 'worlds',
                     enabled: enabled
                 }, session.accessToken, lang);
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
-                    addToQueue('update_book_tool_setting', {data: {
-                        bookId: currentEntityId,
-                        toolName: 'worlds',
-                        enabled: enabled
-                    }});
-                }
             }
             if (response && setBook && book) {
                 setToolEnabled(enabled);
@@ -132,12 +114,11 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
             }
         }
     }
-
+    
     async function getWorlds(): Promise<void> {
         try {
             if (isSeriesMode) {
-                // Series mode: server only (series are not local)
-                const response: SeriesWorldProps[] = await System.authGetQueryToServer<SeriesWorldProps[]>('series/world/list', session.accessToken, lang, {
+                const response: SeriesWorldProps[] = await apiGet<SeriesWorldProps[]>('series/world/list', session.accessToken, lang, {
                     seriesid: currentEntityId
                 });
                 if (response) {
@@ -169,16 +150,31 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                     }));
                     setWorldsSelector(formattedWorlds);
                 }
-            } else {
-                // Book mode: dual offline/online logic
-                let response: WorldListResponse;
-                if (isCurrentlyOffline() || book?.localBook) {
-                    response = await tauri.getWorlds(currentEntityId, true);
-                } else {
-                    response = await System.authGetQueryToServer<WorldListResponse>('book/worlds', session.accessToken, lang, {
-                        bookid: currentEntityId,
-                    });
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                const response: WorldListResponse = await tauri.getWorlds(currentEntityId, toolEnabled) as WorldListResponse;
+                if (response) {
+                    setWorlds(response.worlds);
+                    setToolEnabled(response.enabled);
+                    if (setBook && book) {
+                        setBook({
+                            ...book, tools: {
+                                characters: book.tools?.characters ?? false,
+                                worlds: response.enabled,
+                                locations: book.tools?.locations ?? false,
+                                spells: book.tools?.spells ?? false
+                            }
+                        });
+                    }
+                    const formattedWorlds: SelectBoxProps[] = response.worlds.map(
+                        (world: WorldProps): SelectBoxProps => ({
+                            label: world.name,
+                            value: world.id.toString(),
+                        }),
+                    );
+                    setWorldsSelector(formattedWorlds);
                 }
+            } else {
+                const response: WorldListResponse = await apiGet<WorldListResponse>('book/worlds', session.accessToken, lang, {bookid: currentEntityId});
                 if (response) {
                     setWorlds(response.worlds);
                     setToolEnabled(response.enabled);
@@ -209,7 +205,7 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
             }
         }
     }
-
+    
     async function handleAddNewWorld(): Promise<void> {
         if (newWorldName.trim() === '') {
             errorMessage(t("worldSetting.newWorldNameError"));
@@ -218,8 +214,7 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
         try {
             let newWorldId: string;
             if (isSeriesMode) {
-                // Series mode: server only
-                newWorldId = await System.authPostToServer<string>(
+                newWorldId = await apiPost<string>(
                     'series/world/add',
                     {
                         seriesId: currentEntityId,
@@ -232,30 +227,22 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                     errorMessage(t("worldSetting.addWorldError"));
                     return;
                 }
-            } else if (isCurrentlyOffline() || book?.localBook) {
-                // Book mode: offline/local
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
                 newWorldId = await tauri.addWorld(currentEntityId, newWorldName);
                 if (!newWorldId) {
                     errorMessage(t("worldSetting.addWorldError"));
                     return;
                 }
             } else {
-                // Book mode: online
-                newWorldId = await System.authPostToServer<string>('book/world/add', {
+                const worldId: string = await apiPost<string>('book/world/add', {
                     worldName: newWorldName,
                     bookId: currentEntityId,
                 }, session.accessToken, lang);
-                if (!newWorldId) {
+                if (!worldId) {
                     errorMessage(t("worldSetting.addWorldError"));
                     return;
                 }
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
-                    addToQueue('add_world', {data: {
-                        worldName: newWorldName,
-                        worldId: newWorldId,
-                        bookId: currentEntityId,
-                    }});
-                }
+                newWorldId = worldId;
             }
             const newWorld: WorldProps = {
                 id: newWorldId,
@@ -298,11 +285,8 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
         if (worlds.length === 0) return;
         try {
             const currentWorld: WorldProps = worlds[selectedWorldIndex];
-            let response: boolean;
-
             if (isSeriesMode) {
-                // Series mode: server only
-                response = await System.authPatchToServer<boolean>('series/world/update', {
+                const response: boolean = await apiPatch<boolean>('series/world/update', {
                     worldId: currentWorld.id,
                     name: currentWorld.name,
                     history: currentWorld.history,
@@ -311,27 +295,26 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                     religion: currentWorld.religion,
                     languages: currentWorld.languages,
                 }, session.accessToken, lang);
-            } else if (isCurrentlyOffline() || book?.localBook) {
-                // Book mode: offline/local
-                response = await tauri.updateWorld(currentWorld);
+                if (!response) {
+                    errorMessage(t("worldSetting.updateWorldError"));
+                    return;
+                }
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                const response: boolean = await tauri.updateWorld(currentWorld);
+                if (!response) {
+                    errorMessage(t("worldSetting.updateWorldError"));
+                    return;
+                }
             } else {
-                // Book mode: online
-                response = await System.authPatchToServer<boolean>('book/world/update', {
+                const response: boolean = await apiPatch<boolean>('book/world/update', {
                     world: currentWorld,
                     bookId: currentEntityId,
                 }, session.accessToken, lang);
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
-                    addToQueue('update_world', {data: {
-                        world: currentWorld,
-                        bookId: currentEntityId,
-                    }});
+                if (!response) {
+                    errorMessage(t("worldSetting.updateWorldError"));
+                    return;
                 }
             }
-
-            if (!response) {
-                errorMessage(t("worldSetting.updateWorldError"));
-                return;
-            }
             successMessage(t("worldSetting.updateWorldSuccess"));
         } catch (e: unknown) {
             if (e instanceof Error) {
@@ -341,27 +324,26 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
             }
         }
     }
-
+    
     function handleWorldSelect(worldId: string): void {
         const index: number = worlds.findIndex((world: WorldProps): boolean => world.id === worldId);
         if (index !== -1) {
             setSelectedWorldIndex(index);
         }
     }
-
-    function handleInputChange(value: string, field: keyof WorldProps) {
-        const updatedWorlds = [...worlds] as WorldProps[];
-        (updatedWorlds[selectedWorldIndex][field] as string) = value;
+    
+    function handleInputChange(value: string, field: WorldTextField): void {
+        const updatedWorlds: WorldProps[] = [...worlds];
+        updatedWorlds[selectedWorldIndex][field] = value;
         setWorlds(updatedWorlds);
     }
-
+    
     async function handleExportToSeries(): Promise<void> {
-        if (isCurrentlyOffline()) return;
         const selectedWorld: WorldProps | undefined = worlds[selectedWorldIndex];
         if (!selectedWorld || !bookSeriesId) return;
-
+        
         try {
-            const seriesWorldId: string = await System.authPostToServer<string>('series/world/add', {
+            const seriesWorldId: string = await apiPost<string>('series/world/add', {
                 seriesId: bookSeriesId,
                 world: {
                     name: selectedWorld.name,
@@ -372,15 +354,15 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                     languages: selectedWorld.languages || null,
                 }
             }, session.accessToken, lang);
-
+            
             if (seriesWorldId) {
-                const updateResponse: boolean = await System.authPostToServer<boolean>('book/world/update', {
+                const updateResponse: boolean = await apiPost<boolean>('book/world/update', {
                     world: {
                         ...selectedWorld,
                         seriesWorldId: seriesWorldId
                     },
                 }, session.accessToken, lang);
-
+                
                 if (updateResponse) {
                     const updatedWorlds: WorldProps[] = [...worlds];
                     updatedWorlds[selectedWorldIndex] = {...selectedWorld, seriesWorldId: seriesWorldId};
@@ -395,33 +377,23 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
             }
         }
     }
-
+    
     async function handleImportFromSeries(seriesWorldId: string): Promise<void> {
-        if (isCurrentlyOffline()) return;
-        const seriesWorld: SeriesWorldListItem | undefined = seriesWorlds.find((w) => w.id === seriesWorldId);
+        const seriesWorld: SeriesWorldListItem | undefined = seriesWorlds.find((w: SeriesWorldListItem): boolean => w.id === seriesWorldId);
         if (!seriesWorld) return;
-
+        
         try {
-            const worldId: string = await System.authPostToServer<string>('book/world/add', {
+            const worldId: string = await apiPost<string>('book/world/add', {
                 worldName: seriesWorld.name,
                 bookId: currentEntityId,
                 seriesWorldId: seriesWorldId,
             }, session.accessToken, lang);
-
+            
             if (!worldId) {
                 errorMessage(t("worldSetting.importError"));
                 return;
             }
-
-            // Sync to local if book is synced
-            if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
-                addToQueue('add_world', {data: {
-                    worldName: seriesWorld.name,
-                    worldId: worldId,
-                    bookId: currentEntityId,
-                }});
-            }
-
+            
             const newWorld: WorldProps = {
                 id: worldId,
                 name: seriesWorld.name,
@@ -455,19 +427,19 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
             }
         }
     }
-
+    
     function getSeriesWorldForCurrentWorld(): SeriesWorldProps | null {
         const currentWorld: WorldProps = worlds[selectedWorldIndex];
         if (!currentWorld?.seriesWorldId) return null;
         return seriesWorlds.find((world: SeriesWorldListItem): boolean => world.id === currentWorld.seriesWorldId) || null;
     }
-
+    
     return (
         <div className="space-y-6">
             {showToggle && !isSeriesMode && (
-                <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
+                <div className="bg-secondary rounded-xl p-4">
                     <InputField
-                        icon={faToggleOn}
+                        icon={ToggleRight}
                         fieldName={t('worldSetting.enableTool')}
                         input={
                             <ToggleSwitch
@@ -483,25 +455,26 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
             )}
             {(toolEnabled || isSeriesMode) && (
                 <>
-                    {!isSeriesMode && bookSeriesId && !isCurrentlyOffline() &&
+                    {!isSeriesMode && bookSeriesId &&
                         seriesWorlds.filter((seriesWorld: SeriesWorldProps): boolean => !worlds.some((world: WorldProps): boolean => world.seriesWorldId === seriesWorld.id)).length > 0 && (
                             <SeriesImportSelector
                                 availableItems={seriesWorlds
                                     .filter((seriesWorld: SeriesWorldProps): boolean => !worlds.some((world: WorldProps): boolean => world.seriesWorldId === seriesWorld.id))
-                                    .map((seriesWorld: SeriesWorldProps) => ({id: seriesWorld.id, name: seriesWorld.name}))}
+                                    .map((seriesWorld: SeriesWorldProps): { id: string; name: string } => ({
+                                        id: seriesWorld.id,
+                                        name: seriesWorld.name
+                                    }))}
                                 onImport={handleImportFromSeries}
                                 placeholder={t("seriesImport.selectElement")}
                                 label={t("seriesImport.importFromSeries")}
                             />
                         )}
-                    <div
-                        className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
                         <div className="grid grid-cols-1 gap-4 mb-4">
                             <InputField
                                 fieldName={t("worldSetting.selectWorld")}
                                 input={
                                     <SelectBox
-                                        onChangeCallBack={(e) => handleWorldSelect(e.target.value)}
+                                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => handleWorldSelect(e.target.value)}
                                         data={worldsSelector.length > 0 ? worldsSelector : [{
                                             label: t("worldSetting.noWorldAvailable"),
                                             value: '0'
@@ -510,9 +483,9 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                                         placeholder={t("worldSetting.selectWorldPlaceholder")}
                                     />
                                 }
-                                actionIcon={faPlus}
+                                actionIcon={Plus}
                                 actionLabel={t("worldSetting.addWorldLabel")}
-                                action={async () => setShowAddNewWorld(!showAddNewWorld)}
+                                action={async (): Promise<void> => setShowAddNewWorld(!showAddNewWorld)}
                             />
 
                             {showAddNewWorld && (
@@ -520,31 +493,25 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                                     input={
                                         <TextInput
                                             value={newWorldName}
-                                            setValue={(e: ChangeEvent<HTMLInputElement>) => setNewWorldName(e.target.value)}
+                                            setValue={(e: ChangeEvent<HTMLInputElement>): void => setNewWorldName(e.target.value)}
                                             placeholder={t("worldSetting.newWorldPlaceholder")}
                                         />
                                     }
-                                    actionIcon={faPlus}
+                                    actionIcon={Plus}
                                     actionLabel={t("worldSetting.createWorldLabel")}
                                     addButtonCallBack={handleAddNewWorld}
                                 />
                             )}
-                            {!isSeriesMode && bookSeriesId && !isCurrentlyOffline() && worlds[selectedWorldIndex] && !worlds[selectedWorldIndex].seriesWorldId && (
-                                <button
-                                    onClick={handleExportToSeries}
-                                    className="flex items-center gap-2 px-4 py-2 bg-blue-500/90 hover:bg-blue-500 rounded-xl border border-blue-600 shadow-md hover:shadow-lg transition-all duration-200"
-                                >
-                                    <FontAwesomeIcon icon={faShare} className="w-4 h-4 text-text-primary"/>
-                                    <span className="text-text-primary font-medium">{t("worldSetting.exportToSeries")}</span>
-                                </button>
+                            {!isSeriesMode && bookSeriesId && worlds[selectedWorldIndex] && !worlds[selectedWorldIndex].seriesWorldId && (
+                                <Button variant="secondary" size="sm" icon={Share2} onClick={handleExportToSeries}>
+                                    {t("worldSetting.exportToSeries")}
+                                </Button>
                             )}
                         </div>
-                    </div>
 
                     {worlds.length > 0 && worlds[selectedWorldIndex] ? (
                         <WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex, isSeriesMode}}>
-                            <div
-                                className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
+                            <div className="space-y-6">
                                 <div className="mb-4">
                                     <InputField
                                         fieldName={t("worldSetting.worldName")}
@@ -556,8 +523,8 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                                                 bookElementId={worlds[selectedWorldIndex].id}
                                                 field="name"
                                                 elementType="world"
-                                                onDownload={() => {
-                                                    const seriesWorld = getSeriesWorldForCurrentWorld();
+                                                onDownload={(): void => {
+                                                    const seriesWorld: SeriesWorldProps | null = getSeriesWorldForCurrentWorld();
                                                     if (seriesWorld) {
                                                         const updatedWorlds: WorldProps[] = [...worlds];
                                                         updatedWorlds[selectedWorldIndex].name = seriesWorld.name;
@@ -568,7 +535,7 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                                             >
                                                 <TextInput
                                                     value={worlds[selectedWorldIndex].name}
-                                                    setValue={(e: ChangeEvent<HTMLInputElement>) => {
+                                                    setValue={(e: ChangeEvent<HTMLInputElement>): void => {
                                                         const updatedWorlds: WorldProps[] = [...worlds];
                                                         updatedWorlds[selectedWorldIndex].name = e.target.value
                                                         setWorlds(updatedWorlds);
@@ -589,24 +556,21 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                                             bookElementId={worlds[selectedWorldIndex].id}
                                             field="history"
                                             elementType="world"
-                                            onDownload={() => {
-                                                const seriesWorld = getSeriesWorldForCurrentWorld();
+                                            onDownload={(): void => {
+                                                const seriesWorld: SeriesWorldProps | null = getSeriesWorldForCurrentWorld();
                                                 if (seriesWorld) handleInputChange(seriesWorld.history || '', 'history');
                                             }}
                                             onSyncComplete={getSeriesWorlds}
                                         >
-                                            <TexteAreaInput
+                                            <TextAreaInput
                                                 value={worlds[selectedWorldIndex].history || ''}
-                                                setValue={(e) => handleInputChange(e.target.value, 'history')}
+                                                setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => handleInputChange(e.target.value, 'history')}
                                                 placeholder={t("worldSetting.worldHistoryPlaceholder")}
                                             />
                                         </SyncFieldWrapper>
                                     }
                                 />
-                            </div>
 
-                            <div
-                                className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
                                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                     <InputField
                                         fieldName={t("worldSetting.politics")}
@@ -618,15 +582,15 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                                                 bookElementId={worlds[selectedWorldIndex].id}
                                                 field="politics"
                                                 elementType="world"
-                                                onDownload={() => {
-                                                    const seriesWorld = getSeriesWorldForCurrentWorld();
+                                                onDownload={(): void => {
+                                                    const seriesWorld: SeriesWorldProps | null = getSeriesWorldForCurrentWorld();
                                                     if (seriesWorld) handleInputChange(seriesWorld.politics || '', 'politics');
                                                 }}
                                                 onSyncComplete={getSeriesWorlds}
                                             >
-                                                <TexteAreaInput
+                                                <TextAreaInput
                                                     value={worlds[selectedWorldIndex].politics || ''}
-                                                    setValue={(e) => handleInputChange(e.target.value, 'politics')}
+                                                    setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => handleInputChange(e.target.value, 'politics')}
                                                     placeholder={t("worldSetting.politicsPlaceholder")}
                                                 />
                                             </SyncFieldWrapper>
@@ -642,25 +606,22 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                                                 bookElementId={worlds[selectedWorldIndex].id}
                                                 field="economy"
                                                 elementType="world"
-                                                onDownload={() => {
-                                                    const seriesWorld = getSeriesWorldForCurrentWorld();
+                                                onDownload={(): void => {
+                                                    const seriesWorld: SeriesWorldProps | null = getSeriesWorldForCurrentWorld();
                                                     if (seriesWorld) handleInputChange(seriesWorld.economy || '', 'economy');
                                                 }}
                                                 onSyncComplete={getSeriesWorlds}
                                             >
-                                                <TexteAreaInput
+                                                <TextAreaInput
                                                     value={worlds[selectedWorldIndex].economy || ''}
-                                                    setValue={(e) => handleInputChange(e.target.value, 'economy')}
+                                                    setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => handleInputChange(e.target.value, 'economy')}
                                                     placeholder={t("worldSetting.economyPlaceholder")}
                                                 />
                                             </SyncFieldWrapper>
                                         }
                                     />
                                 </div>
-                            </div>
 
-                            <div
-                                className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
                                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                     <InputField
                                         fieldName={t("worldSetting.religion")}
@@ -672,15 +633,15 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                                                 bookElementId={worlds[selectedWorldIndex].id}
                                                 field="religion"
                                                 elementType="world"
-                                                onDownload={() => {
-                                                    const seriesWorld = getSeriesWorldForCurrentWorld();
+                                                onDownload={(): void => {
+                                                    const seriesWorld: SeriesWorldProps | null = getSeriesWorldForCurrentWorld();
                                                     if (seriesWorld) handleInputChange(seriesWorld.religion || '', 'religion');
                                                 }}
                                                 onSyncComplete={getSeriesWorlds}
                                             >
-                                                <TexteAreaInput
+                                                <TextAreaInput
                                                     value={worlds[selectedWorldIndex].religion || ''}
-                                                    setValue={(e) => handleInputChange(e.target.value, 'religion')}
+                                                    setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => handleInputChange(e.target.value, 'religion')}
                                                     placeholder={t("worldSetting.religionPlaceholder")}
                                                 />
                                             </SyncFieldWrapper>
@@ -696,31 +657,31 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                                                 bookElementId={worlds[selectedWorldIndex].id}
                                                 field="languages"
                                                 elementType="world"
-                                                onDownload={() => {
-                                                    const seriesWorld = getSeriesWorldForCurrentWorld();
+                                                onDownload={(): void => {
+                                                    const seriesWorld: SeriesWorldProps | null = getSeriesWorldForCurrentWorld();
                                                     if (seriesWorld) handleInputChange(seriesWorld.languages || '', 'languages');
                                                 }}
                                                 onSyncComplete={getSeriesWorlds}
                                             >
-                                                <TexteAreaInput
+                                                <TextAreaInput
                                                     value={worlds[selectedWorldIndex].languages || ''}
-                                                    setValue={(e) => handleInputChange(e.target.value, 'languages')}
+                                                    setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => handleInputChange(e.target.value, 'languages')}
                                                     placeholder={t("worldSetting.languagesPlaceholder")}
                                                 />
                                             </SyncFieldWrapper>
                                         }
                                     />
                                 </div>
-                            </div>
-
-                            {elementSections.map((section, index) => (
-                                <div key={index}
-                                     className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
+                                
+                                {elementSections.map((section: ElementSection, index: number): React.JSX.Element => {
+                                    const SectionIcon: LucideIcon = section.icon;
+                                return (
+                                    <div key={index}>
                                     <h3 className="text-lg font-semibold text-text-primary mb-4 flex items-center">
-                                        <FontAwesomeIcon icon={section.icon} className="mr-2 w-5 h-5"/>
+                                        <SectionIcon className="mr-2 w-5 h-5" strokeWidth={1.75}/>
                                         {section.title}
                                         <span
-                                            className="ml-2 text-sm bg-dark-background text-text-secondary py-0.5 px-2 rounded-full">
+                                            className="ml-2 text-sm bg-secondary text-text-secondary py-0.5 px-2 rounded-full">
                                             {worlds[selectedWorldIndex][section.section]?.length || 0}
                                         </span>
                                     </h3>
@@ -728,13 +689,14 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
                                         sectionLabel={section.title}
                                         sectionType={section.section}
                                     />
-                                </div>
-                            ))}
+                                    </div>
+                                );
+                            })}
+                            </div>
                         </WorldContext.Provider>
                     ) : (
-                        <div
-                            className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-8 border border-secondary/50 text-center">
-                            <p className="text-text-secondary mb-4">{t("worldSetting.noWorldAvailable")}</p>
+                        <div className="text-center py-8">
+                            <p className="text-text-secondary">{t("worldSetting.noWorldAvailable")}</p>
                         </div>
                     )}
                 </>
@@ -743,4 +705,4 @@ export function WorldSetting(props: WorldSettingProps, ref: React.Ref<{ handleSa
     );
 }
 
-export default forwardRef(WorldSetting);
+export default forwardRef<SettingRef, WorldSettingProps>(WorldSetting);
\ No newline at end of file
diff --git a/components/book/settings/world/editor/WorldEditor.tsx b/components/book/settings/world/editor/WorldEditor.tsx
index d3aa1c4..a9fe1c2 100644
--- a/components/book/settings/world/editor/WorldEditor.tsx
+++ b/components/book/settings/world/editor/WorldEditor.tsx
@@ -1,17 +1,16 @@
 'use client';
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 import {useWorlds, UseWorldsConfig} from '@/hooks/settings/useWorlds';
-import {useTranslations} from 'next-intl';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faPlus, faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
-import {BookContext} from '@/context/BookContext';
-import {WorldProps} from '@/lib/models/World';
-import {SeriesWorldProps} from '@/lib/models/Series';
+import {useTranslations} from '@/lib/i18n';
+import {Plus} from 'lucide-react';
+import PulseLoader from '@/components/ui/PulseLoader';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {WorldProps, WorldTextField} from '@/lib/types/world';
+import {SeriesWorldProps} from '@/lib/types/series';
 import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
-import AlertBox from '@/components/AlertBox';
+import AlertBox from '@/components/ui/AlertBox';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import ToggleSwitch from '@/components/form/ToggleSwitch';
 import SeriesImportSelector from '@/components/form/SeriesImportSelector';
 
 import WorldEditorList from './WorldEditorList';
@@ -25,17 +24,17 @@ import WorldEditorEdit from './WorldEditorEdit';
  */
 export default function WorldEditor(): React.JSX.Element {
     const t = useTranslations();
-    const {book} = useContext(BookContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
     const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
     const [showAddForm, setShowAddForm] = useState<boolean>(false);
-
+    
     const config: UseWorldsConfig = useMemo(function (): UseWorldsConfig {
         return {
             entityType: 'book',
             entityId: book?.bookId || '',
         };
     }, [book?.bookId]);
-
+    
     const {
         worlds,
         seriesWorlds,
@@ -60,7 +59,7 @@ export default function WorldEditor(): React.JSX.Element {
         exitEditMode,
         backToList,
     } = useWorlds(config);
-
+    
     const availableSeriesWorlds = useMemo(function (): SeriesWorldProps[] {
         return seriesWorlds.filter(function (sw: SeriesWorldProps): boolean {
             return !worlds.some(function (w: WorldProps): boolean {
@@ -68,16 +67,16 @@ export default function WorldEditor(): React.JSX.Element {
             });
         });
     }, [seriesWorlds, worlds]);
-
-    const handleWorldFieldChange = useCallback(function (field: keyof WorldProps, value: string): void {
+    
+    const handleWorldFieldChange = useCallback(function (field: WorldTextField, value: string): void {
         updateWorldField(field, value);
     }, [updateWorldField]);
-
+    
     // Wrapper pour convertir WorldProps en worldId
     const handleWorldClick = useCallback(function (world: WorldProps): void {
         enterDetailMode(world.id);
     }, [enterDetailMode]);
-
+    
     // Gestion de l'ajout
     async function handleAddWorld(): Promise<void> {
         if (newWorldName.trim()) {
@@ -87,26 +86,22 @@ export default function WorldEditor(): React.JSX.Element {
             setShowAddForm(true);
         }
     }
-
+    
     async function handleSave(): Promise<void> {
         await exitEditMode(true);
     }
-
+    
     function handleCancel(): void {
         exitEditMode(false);
     }
-
+    
     if (isLoading) {
-        return (
-            <div className="flex items-center justify-center py-8">
-                <FontAwesomeIcon icon={faSpinner} className="w-6 h-6 text-primary animate-spin"/>
-            </div>
-        );
+        return <PulseLoader size="sm"/>;
     }
-
+    
     const selectedWorld: WorldProps | undefined = worlds[selectedWorldIndex];
     const canExport: boolean = Boolean(bookSeriesId && selectedWorld && !selectedWorld.seriesWorldId);
-
+    
     return (
         <div className="flex flex-col h-full">
             <ToolDetailHeader
@@ -122,70 +117,52 @@ export default function WorldEditor(): React.JSX.Element {
                 showExport={canExport}
                 showDelete={false}
             />
-
+            
             <div className="flex-1 overflow-y-auto">
                 {viewMode === 'list' && (
                     <div className="space-y-3 p-2">
-                        {/* Toggle tool */}
-                        <div className="bg-secondary/20 rounded-lg p-3 border border-secondary/30">
-                            <InputField
-                                icon={faToggleOn}
-                                fieldName={t('worldSetting.enableTool')}
-                                input={
-                                    <ToggleSwitch
-                                        checked={toolEnabled}
-                                        onChange={toggleTool}
-                                    />
-                                }
+                        {/* Import from series */}
+                        {bookSeriesId && availableSeriesWorlds.length > 0 && (
+                            <SeriesImportSelector
+                                availableItems={availableSeriesWorlds.map(function (sw: SeriesWorldProps) {
+                                    return {id: sw.id, name: sw.name};
+                                })}
+                                onImport={importFromSeries}
+                                placeholder={t('seriesImport.selectElement')}
+                                label={t('seriesImport.importFromSeries')}
                             />
-                        </div>
-
-                        {toolEnabled && (
-                            <>
-                                {/* Import from series */}
-                                {bookSeriesId && availableSeriesWorlds.length > 0 && (
-                                    <SeriesImportSelector
-                                        availableItems={availableSeriesWorlds.map(function (sw: SeriesWorldProps) {
-                                            return {id: sw.id, name: sw.name};
-                                        })}
-                                        onImport={importFromSeries}
-                                        placeholder={t('seriesImport.selectElement')}
-                                        label={t('seriesImport.importFromSeries')}
-                                    />
-                                )}
-
-                                {showAddForm && (
-                                    <div className="px-2">
-                                        <InputField
-                                            input={
-                                                <TextInput
-                                                    value={newWorldName}
-                                                    setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
-                                                        setNewWorldName(e.target.value);
-                                                    }}
-                                                    placeholder={t('worldSetting.newWorldPlaceholder')}
-                                                />
-                                            }
-                                            actionIcon={faPlus}
-                                            actionLabel={t('worldSetting.createWorldLabel')}
-                                            addButtonCallBack={async function (): Promise<void> {
-                                                await addNewWorld();
-                                                setShowAddForm(false);
-                                            }}
-                                        />
-                                    </div>
-                                )}
-
-                                <WorldEditorList
-                                    worlds={worlds}
-                                    onWorldClick={handleWorldClick}
-                                    onAddWorld={handleAddWorld}
-                                />
-                            </>
                         )}
+                        
+                        {showAddForm && (
+                            <div className="px-2">
+                                <InputField
+                                    input={
+                                        <TextInput
+                                            value={newWorldName}
+                                            setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
+                                                setNewWorldName(e.target.value);
+                                            }}
+                                            placeholder={t('worldSetting.newWorldPlaceholder')}
+                                        />
+                                    }
+                                    actionIcon={Plus}
+                                    actionLabel={t('worldSetting.createWorldLabel')}
+                                    addButtonCallBack={async function (): Promise<void> {
+                                        await addNewWorld();
+                                        setShowAddForm(false);
+                                    }}
+                                />
+                            </div>
+                        )}
+                        
+                        <WorldEditorList
+                            worlds={worlds}
+                            onWorldClick={handleWorldClick}
+                            onAddWorld={handleAddWorld}
+                        />
                     </div>
                 )}
-
+                
                 {viewMode === 'detail' && selectedWorld && (
                     <div className="p-4">
                         <WorldEditorDetail
@@ -194,7 +171,7 @@ export default function WorldEditor(): React.JSX.Element {
                         />
                     </div>
                 )}
-
+                
                 {viewMode === 'edit' && selectedWorld && (
                     <div className="p-4">
                         <WorldEditorEdit
@@ -209,7 +186,7 @@ export default function WorldEditor(): React.JSX.Element {
                     </div>
                 )}
             </div>
-
+            
             {showDeleteConfirm && selectedWorld && (
                 <AlertBox
                     title={t('worldSetting.deleteTitle')}
@@ -217,8 +194,12 @@ export default function WorldEditor(): React.JSX.Element {
                     type="danger"
                     confirmText={t('common.delete')}
                     cancelText={t('common.cancel')}
-                    onConfirm={async function (): Promise<void> { setShowDeleteConfirm(false); }}
-                    onCancel={function (): void { setShowDeleteConfirm(false); }}
+                    onConfirm={async function (): Promise<void> {
+                        setShowDeleteConfirm(false);
+                    }}
+                    onCancel={function (): void {
+                        setShowDeleteConfirm(false);
+                    }}
                 />
             )}
         </div>
diff --git a/components/book/settings/world/editor/WorldEditorDetail.tsx b/components/book/settings/world/editor/WorldEditorDetail.tsx
index 82c9694..f6df5dc 100644
--- a/components/book/settings/world/editor/WorldEditorDetail.tsx
+++ b/components/book/settings/world/editor/WorldEditorDetail.tsx
@@ -1,8 +1,10 @@
 'use client';
 import React from 'react';
-import {WorldProps, elementSections, ElementSection, WorldElement} from '@/lib/models/World';
-import {SeriesWorldProps} from '@/lib/models/Series';
-import {useTranslations} from 'next-intl';
+import {ElementSection, WorldElement, WorldProps} from '@/lib/types/world';
+import {elementSections} from '@/lib/constants/world';
+import {SeriesWorldProps} from '@/lib/types/series';
+import {useTranslations} from '@/lib/i18n';
+import DetailField from '@/components/ui/DetailField';
 
 interface WorldEditorDetailProps {
     world: WorldProps;
@@ -14,32 +16,22 @@ interface WorldEditorDetailProps {
  * Mêmes fonctionnalités que WorldSettingsDetail, layout linéaire
  */
 export default function WorldEditorDetail({
-    world,
-    seriesWorld,
-}: WorldEditorDetailProps): React.JSX.Element {
+                                              world,
+                                              seriesWorld,
+                                          }: WorldEditorDetailProps): React.JSX.Element {
     const t = useTranslations();
-
-    function renderField(label: string, value: string | null | undefined): React.JSX.Element | null {
-        if (!value) return null;
-        return (
-            <div className="mb-3">
-                <span className="text-text-secondary text-xs block mb-1">{label}</span>
-                <p className="text-text-primary text-sm whitespace-pre-wrap">{value}</p>
-            </div>
-        );
-    }
-
+    
     function renderElementSection(section: ElementSection): React.JSX.Element | null {
-        const elements: WorldElement[] = world[section.section] as WorldElement[];
+        const elements: WorldElement[] = world[section.section];
         if (!elements || elements.length === 0) return null;
-
+        
         return (
-            <div key={section.section} className="border-b border-secondary/30 pb-3">
+            <div key={section.section} className="border-b border-secondary pb-3">
                 <h4 className="text-text-primary font-medium text-sm mb-2">{section.title}</h4>
                 <div className="space-y-2">
                     {elements.map(function (element: WorldElement): React.JSX.Element {
                         return (
-                            <div key={element.id} className="bg-secondary/20 rounded-lg p-2">
+                            <div key={element.id} className="bg-tertiary rounded-lg p-2">
                                 <p className="text-text-primary font-medium text-sm">{element.name}</p>
                                 {element.description && (
                                     <p className="text-text-secondary text-xs mt-1">{element.description}</p>
@@ -51,33 +43,33 @@ export default function WorldEditorDetail({
             </div>
         );
     }
-
+    
     return (
         <div className="space-y-4">
             {/* Informations de base */}
-            <div className="border-b border-secondary/30 pb-3">
+            <div className="border-b border-secondary pb-3">
                 <h3 className="text-text-primary font-semibold text-base mb-3">{world.name}</h3>
-                {renderField(t('worldSetting.worldHistory'), world.history)}
+                <DetailField variant="compact" label={t('worldSetting.worldHistory')} value={world.history}/>
             </div>
-
+            
             {/* Politique et économie */}
             {(world.politics || world.economy) && (
-                <div className="border-b border-secondary/30 pb-3">
+                <div className="border-b border-secondary pb-3">
                     <h4 className="text-text-primary font-medium text-sm mb-2">{t('worldSetting.politicsEconomy')}</h4>
-                    {renderField(t('worldSetting.politics'), world.politics)}
-                    {renderField(t('worldSetting.economy'), world.economy)}
+                    <DetailField variant="compact" label={t('worldSetting.politics')} value={world.politics}/>
+                    <DetailField variant="compact" label={t('worldSetting.economy')} value={world.economy}/>
                 </div>
             )}
-
+            
             {/* Religion et langues */}
             {(world.religion || world.languages) && (
-                <div className="border-b border-secondary/30 pb-3">
+                <div className="border-b border-secondary pb-3">
                     <h4 className="text-text-primary font-medium text-sm mb-2">{t('worldSetting.cultureLanguages')}</h4>
-                    {renderField(t('worldSetting.religion'), world.religion)}
-                    {renderField(t('worldSetting.languages'), world.languages)}
+                    <DetailField variant="compact" label={t('worldSetting.religion')} value={world.religion}/>
+                    <DetailField variant="compact" label={t('worldSetting.languages')} value={world.languages}/>
                 </div>
             )}
-
+            
             {/* Sections d'éléments */}
             {elementSections.map(function (section: ElementSection): React.JSX.Element | null {
                 return renderElementSection(section);
diff --git a/components/book/settings/world/editor/WorldEditorEdit.tsx b/components/book/settings/world/editor/WorldEditorEdit.tsx
index 5f07894..8c6aed0 100644
--- a/components/book/settings/world/editor/WorldEditorEdit.tsx
+++ b/components/book/settings/world/editor/WorldEditorEdit.tsx
@@ -1,21 +1,22 @@
 'use client';
 import React, {ChangeEvent, Dispatch, SetStateAction} from 'react';
-import {WorldProps, elementSections, ElementSection} from '@/lib/models/World';
-import {SeriesWorldProps} from '@/lib/models/Series';
+import {ElementSection, WorldProps, WorldTextField} from '@/lib/types/world';
+import {elementSections} from '@/lib/constants/world';
+import {SeriesWorldProps} from '@/lib/types/series';
 import {WorldContext} from '@/context/WorldContext';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import TexteAreaInput from '@/components/form/TexteAreaInput';
+import TextAreaInput from '@/components/form/TextAreaInput';
 import SyncFieldWrapper from '@/components/form/SyncFieldWrapper';
 import WorldElementComponent from '@/components/book/settings/world/WorldElement';
-import {useTranslations} from 'next-intl';
+import {useTranslations} from '@/lib/i18n';
 
 interface WorldEditorEditProps {
     world: WorldProps;
     worlds: WorldProps[];
     selectedWorldIndex: number;
     setWorlds: Dispatch<SetStateAction<WorldProps[]>>;
-    onWorldFieldChange: (field: keyof WorldProps, value: string) => void;
+    onWorldFieldChange: (field: WorldTextField, value: string) => void;
     seriesWorld?: SeriesWorldProps | null;
     onSyncComplete?: () => void;
 }
@@ -26,21 +27,21 @@ interface WorldEditorEditProps {
  * SyncFieldWrapper pour tous les champs
  */
 export default function WorldEditorEdit({
-    world,
-    worlds,
-    selectedWorldIndex,
-    setWorlds,
-    onWorldFieldChange,
-    seriesWorld,
-    onSyncComplete,
-}: WorldEditorEditProps): React.JSX.Element {
+                                            world,
+                                            worlds,
+                                            selectedWorldIndex,
+                                            setWorlds,
+                                            onWorldFieldChange,
+                                            seriesWorld,
+                                            onSyncComplete,
+                                        }: WorldEditorEditProps): React.JSX.Element {
     const t = useTranslations();
-
+    
     return (
         <WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex, isSeriesMode: false}}>
             <div className="space-y-4">
                 {/* Informations de base */}
-                <div className="border-b border-secondary/30 pb-3">
+                <div className="border-b border-secondary pb-3">
                     <h4 className="text-text-primary font-medium text-sm mb-3">{t('worldSetting.basicInfo')}</h4>
                     <div className="space-y-3">
                         <InputField
@@ -74,7 +75,7 @@ export default function WorldEditorEdit({
                                 </SyncFieldWrapper>
                             }
                         />
-
+                        
                         <InputField
                             fieldName={t("worldSetting.worldHistory")}
                             input={
@@ -90,7 +91,7 @@ export default function WorldEditorEdit({
                                     }}
                                     onSyncComplete={onSyncComplete}
                                 >
-                                    <TexteAreaInput
+                                    <TextAreaInput
                                         value={world.history || ''}
                                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                             onWorldFieldChange('history', e.target.value);
@@ -102,9 +103,9 @@ export default function WorldEditorEdit({
                         />
                     </div>
                 </div>
-
+                
                 {/* Politique et économie */}
-                <div className="border-b border-secondary/30 pb-3">
+                <div className="border-b border-secondary pb-3">
                     <h4 className="text-text-primary font-medium text-sm mb-3">{t('worldSetting.politicsEconomy')}</h4>
                     <div className="space-y-3">
                         <InputField
@@ -122,7 +123,7 @@ export default function WorldEditorEdit({
                                     }}
                                     onSyncComplete={onSyncComplete}
                                 >
-                                    <TexteAreaInput
+                                    <TextAreaInput
                                         value={world.politics || ''}
                                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                             onWorldFieldChange('politics', e.target.value);
@@ -132,7 +133,7 @@ export default function WorldEditorEdit({
                                 </SyncFieldWrapper>
                             }
                         />
-
+                        
                         <InputField
                             fieldName={t("worldSetting.economy")}
                             input={
@@ -148,7 +149,7 @@ export default function WorldEditorEdit({
                                     }}
                                     onSyncComplete={onSyncComplete}
                                 >
-                                    <TexteAreaInput
+                                    <TextAreaInput
                                         value={world.economy || ''}
                                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                             onWorldFieldChange('economy', e.target.value);
@@ -160,9 +161,9 @@ export default function WorldEditorEdit({
                         />
                     </div>
                 </div>
-
+                
                 {/* Religion et langues */}
-                <div className="border-b border-secondary/30 pb-3">
+                <div className="border-b border-secondary pb-3">
                     <h4 className="text-text-primary font-medium text-sm mb-3">{t('worldSetting.cultureLanguages')}</h4>
                     <div className="space-y-3">
                         <InputField
@@ -180,7 +181,7 @@ export default function WorldEditorEdit({
                                     }}
                                     onSyncComplete={onSyncComplete}
                                 >
-                                    <TexteAreaInput
+                                    <TextAreaInput
                                         value={world.religion || ''}
                                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                             onWorldFieldChange('religion', e.target.value);
@@ -190,7 +191,7 @@ export default function WorldEditorEdit({
                                 </SyncFieldWrapper>
                             }
                         />
-
+                        
                         <InputField
                             fieldName={t("worldSetting.languages")}
                             input={
@@ -206,7 +207,7 @@ export default function WorldEditorEdit({
                                     }}
                                     onSyncComplete={onSyncComplete}
                                 >
-                                    <TexteAreaInput
+                                    <TextAreaInput
                                         value={world.languages || ''}
                                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                             onWorldFieldChange('languages', e.target.value);
@@ -218,11 +219,11 @@ export default function WorldEditorEdit({
                         />
                     </div>
                 </div>
-
+                
                 {/* Sections d'éléments */}
                 {elementSections.map(function (section: ElementSection): React.JSX.Element {
                     return (
-                        <div key={section.section} className="border-b border-secondary/30 pb-3 last:border-b-0">
+                        <div key={section.section} className="border-b border-secondary pb-3 last:border-b-0">
                             <h4 className="text-text-primary font-medium text-sm mb-3">{section.title}</h4>
                             <WorldElementComponent
                                 sectionLabel={section.title}
diff --git a/components/book/settings/world/editor/WorldEditorList.tsx b/components/book/settings/world/editor/WorldEditorList.tsx
index c8b3dad..28e249e 100644
--- a/components/book/settings/world/editor/WorldEditorList.tsx
+++ b/components/book/settings/world/editor/WorldEditorList.tsx
@@ -1,11 +1,13 @@
 'use client';
 import React, {useState} from 'react';
-import {WorldProps} from '@/lib/models/World';
+import {WorldProps} from '@/lib/types/world';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronRight, faGlobe, faPlus} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {Globe, Plus} from 'lucide-react';
+import EmptyState from '@/components/ui/EmptyState';
+import EntityListItem from '@/components/ui/EntityListItem';
+import AvatarIcon from '@/components/ui/AvatarIcon';
+import {useTranslations} from '@/lib/i18n';
 
 interface WorldEditorListProps {
     worlds: WorldProps[];
@@ -19,21 +21,21 @@ interface WorldEditorListProps {
  * PAS de scroll interne (géré par parent ComposerRightBar)
  */
 export default function WorldEditorList({
-    worlds,
-    onWorldClick,
-    onAddWorld,
-}: WorldEditorListProps): React.JSX.Element {
+                                            worlds,
+                                            onWorldClick,
+                                            onAddWorld,
+                                        }: WorldEditorListProps): React.JSX.Element {
     const t = useTranslations();
     const [searchQuery, setSearchQuery] = useState<string>('');
-
+    
     function getFilteredWorlds(): WorldProps[] {
         return worlds.filter(function (world: WorldProps): boolean {
             return world.name.toLowerCase().includes(searchQuery.toLowerCase());
         });
     }
-
+    
     const filteredWorlds: WorldProps[] = getFilteredWorlds();
-
+    
     return (
         <div className="space-y-3">
             <div className="px-2">
@@ -47,57 +49,31 @@ export default function WorldEditorList({
                             placeholder={t('worldSetting.search')}
                         />
                     }
-                    actionIcon={faPlus}
+                    actionIcon={Plus}
                     actionLabel={t('worldSetting.addWorldLabel')}
                     addButtonCallBack={async function (): Promise<void> {
                         onAddWorld();
                     }}
                 />
             </div>
-
+            
             <div className="px-2 space-y-2">
                 {filteredWorlds.length === 0 ? (
-                    <div className="flex flex-col items-center justify-center py-8 text-center">
-                        <div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3">
-                            <FontAwesomeIcon icon={faGlobe} className="text-primary w-8 h-8"/>
-                        </div>
-                        <h3 className="text-text-primary font-semibold text-base mb-1">
-                            {t('worldSetting.noWorldAvailable')}
-                        </h3>
-                        <p className="text-muted text-sm max-w-xs">
-                            {t('worldSetting.noWorldDescription')}
-                        </p>
-                    </div>
+                    <EmptyState icon={Globe} title={t('worldSetting.noWorldAvailable')}
+                                description={t('worldSetting.noWorldDescription')}/>
                 ) : (
                     filteredWorlds.map(function (world: WorldProps): React.JSX.Element {
                         return (
-                            <div
+                            <EntityListItem
                                 key={world.id}
-                                onClick={function (): void { onWorldClick(world); }}
-                                className="group flex items-center p-3 bg-secondary/30 rounded-lg border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md transition-all duration-200 hover:border-primary/50"
-                            >
-                                <div className="w-10 h-10 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-sm group-hover:scale-110 transition-transform flex items-center justify-center">
-                                    <FontAwesomeIcon icon={faGlobe} className="text-primary w-5 h-5"/>
-                                </div>
-
-                                <div className="ml-3 flex-1 min-w-0">
-                                    <div className="text-text-primary font-semibold text-sm group-hover:text-primary transition-colors truncate">
-                                        {world.name}
-                                    </div>
-                                    {world.history && (
-                                        <div className="text-muted text-xs truncate">
-                                            {world.history.substring(0, 50)}{world.history.length > 50 ? '...' : ''}
-                                        </div>
-                                    )}
-                                </div>
-
-                                <div className="w-6 flex justify-center">
-                                    <FontAwesomeIcon
-                                        icon={faChevronRight}
-                                        className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-3 h-3"
-                                    />
-                                </div>
-                            </div>
+                                size="sm"
+                                onClick={function (): void {
+                                    onWorldClick(world);
+                                }}
+                                avatar={<AvatarIcon size="sm" icon={Globe}/>}
+                                title={world.name}
+                                subtitle={world.history ? world.history.substring(0, 50) + (world.history.length > 50 ? '...' : '') : null}
+                            />
                         );
                     })
                 )}
diff --git a/components/book/settings/world/settings/WorldSettings.tsx b/components/book/settings/world/settings/WorldSettings.tsx
index 5d34953..614ec30 100644
--- a/components/book/settings/world/settings/WorldSettings.tsx
+++ b/components/book/settings/world/settings/WorldSettings.tsx
@@ -1,17 +1,13 @@
 'use client';
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 import {useWorlds, UseWorldsConfig} from '@/hooks/settings/useWorlds';
-import {useTranslations} from 'next-intl';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
-import {BookContext} from '@/context/BookContext';
-import {WorldProps} from '@/lib/models/World';
-import {SeriesWorldProps} from '@/lib/models/Series';
-import InputField from '@/components/form/InputField';
-import ToggleSwitch from '@/components/form/ToggleSwitch';
+import {useTranslations} from '@/lib/i18n';
+import PulseLoader from '@/components/ui/PulseLoader';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {WorldProps, WorldTextField} from '@/lib/types/world';
+import {SeriesWorldProps} from '@/lib/types/series';
 import SeriesImportSelector from '@/components/form/SeriesImportSelector';
 import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
-import AlertBox from '@/components/AlertBox';
 
 import WorldSettingsList from './WorldSettingsList';
 import WorldSettingsDetail from './WorldSettingsDetail';
@@ -20,7 +16,7 @@ import WorldSettingsEdit from './WorldSettingsEdit';
 interface WorldSettingsProps {
     entityType?: 'book' | 'series';
     entityId?: string;
-    showToggle?: boolean;
+    toolEnabled?: boolean;
 }
 
 /**
@@ -29,23 +25,23 @@ interface WorldSettingsProps {
  * Inclut: toggle tool, import from series, export to series
  */
 export default function WorldSettings({
-    entityType = 'book',
-    entityId,
-    showToggle = true,
-}: WorldSettingsProps): React.JSX.Element {
+                                          entityType = 'book',
+                                          entityId,
+                                          toolEnabled: parentToolEnabled,
+                                      }: WorldSettingsProps): React.JSX.Element {
     const t = useTranslations();
-    const {book} = useContext(BookContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
     const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
-
+    
     const resolvedEntityId: string = entityId || book?.bookId || '';
-
+    
     const config: UseWorldsConfig = useMemo(function (): UseWorldsConfig {
         return {
             entityType,
             entityId: resolvedEntityId,
         };
     }, [entityType, resolvedEntityId]);
-
+    
     const {
         worlds,
         seriesWorlds,
@@ -71,7 +67,7 @@ export default function WorldSettings({
         exitEditMode,
         backToList,
     } = useWorlds(config);
-
+    
     const availableSeriesWorlds = useMemo(function (): SeriesWorldProps[] {
         return seriesWorlds.filter(function (sw: SeriesWorldProps): boolean {
             return !worlds.some(function (w: WorldProps): boolean {
@@ -79,30 +75,26 @@ export default function WorldSettings({
             });
         });
     }, [seriesWorlds, worlds]);
-
-    const handleWorldFieldChange = useCallback(function (field: keyof WorldProps, value: string): void {
+    
+    const handleWorldFieldChange = useCallback(function (field: WorldTextField, value: string): void {
         updateWorldField(field, value);
     }, [updateWorldField]);
-
+    
     async function handleSave(): Promise<void> {
         await exitEditMode(true);
     }
-
+    
     function handleCancel(): void {
         exitEditMode(false);
     }
-
+    
     if (isLoading) {
-        return (
-            <div className="flex items-center justify-center py-12">
-                <FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
-            </div>
-        );
+        return <PulseLoader/>;
     }
-
+    
     const selectedWorld: WorldProps | undefined = worlds[selectedWorldIndex];
     const canExport: boolean = Boolean(bookSeriesId && selectedWorld && !selectedWorld.seriesWorldId);
-
+    
     return (
         <div className="flex flex-col h-full">
             {/* Header - uniquement pour detail/edit */}
@@ -119,32 +111,12 @@ export default function WorldSettings({
                 showExport={canExport}
                 showDelete={false}
             />
-
+            
             {/* Contenu principal */}
             <div className="flex-1 overflow-y-auto">
                 {viewMode === 'list' && (
                     <div className="space-y-5 p-4">
-                        {/* Toggle tool */}
-                        {showToggle && !isSeriesMode && (
-                            <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
-                                <InputField
-                                    icon={faToggleOn}
-                                    fieldName={t('worldSetting.enableTool')}
-                                    input={
-                                        <ToggleSwitch
-                                            checked={toolEnabled}
-                                            onChange={toggleTool}
-                                        />
-                                    }
-                                />
-                                <p className="text-muted text-sm mt-2">
-                                    {t('worldSetting.enableToolDescription')}
-                                </p>
-                            </div>
-                        )}
-
-                        {/* Contenu si outil activé */}
-                        {(toolEnabled || isSeriesMode) && (
+                        {((parentToolEnabled !== undefined ? parentToolEnabled : toolEnabled) || isSeriesMode) && (
                             <>
                                 {/* Import from series */}
                                 {!isSeriesMode && bookSeriesId && availableSeriesWorlds.length > 0 && (
@@ -157,7 +129,7 @@ export default function WorldSettings({
                                         label={t("seriesImport.importFromSeries")}
                                     />
                                 )}
-
+                                
                                 {/* Liste des mondes */}
                                 <WorldSettingsList
                                     worlds={worlds}
@@ -170,7 +142,7 @@ export default function WorldSettings({
                         )}
                     </div>
                 )}
-
+                
                 {viewMode === 'detail' && selectedWorld && (
                     <div className="p-4">
                         <WorldSettingsDetail
@@ -179,7 +151,7 @@ export default function WorldSettings({
                         />
                     </div>
                 )}
-
+                
                 {viewMode === 'edit' && selectedWorld && (
                     <div className="p-4">
                         <WorldSettingsEdit
diff --git a/components/book/settings/world/settings/WorldSettingsDetail.tsx b/components/book/settings/world/settings/WorldSettingsDetail.tsx
index cbec2f1..81a3a94 100644
--- a/components/book/settings/world/settings/WorldSettingsDetail.tsx
+++ b/components/book/settings/world/settings/WorldSettingsDetail.tsx
@@ -1,19 +1,13 @@
 'use client';
 import React from 'react';
-import {WorldProps, elementSections, ElementSection, WorldElement} from '@/lib/models/World';
-import {SeriesWorldProps} from '@/lib/models/Series';
-import CollapsableArea from '@/components/CollapsableArea';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {
-    faGlobe,
-    faLandmark,
-    faBook,
-    faCoins,
-    faChurch,
-    faLanguage,
-    faScroll
-} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {ElementSection, WorldElement, WorldProps} from '@/lib/types/world';
+import {elementSections} from '@/lib/constants/world';
+import {SeriesWorldProps} from '@/lib/types/series';
+import Collapse from '@/components/ui/Collapse';
+import {Church, Coins, Globe, Landmark, Languages, ScrollText} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import DetailHeroSection from '@/components/ui/DetailHeroSection';
+import DetailField from '@/components/ui/DetailField';
 
 interface WorldSettingsDetailProps {
     world: WorldProps;
@@ -21,104 +15,54 @@ interface WorldSettingsDetailProps {
 }
 
 export default function WorldSettingsDetail({
-    world,
-    seriesWorld,
-}: WorldSettingsDetailProps): React.JSX.Element {
+                                                world,
+                                                seriesWorld,
+                                            }: WorldSettingsDetailProps): React.JSX.Element {
     const t = useTranslations();
-
+    
     function renderElementSection(section: ElementSection): React.JSX.Element | null {
-        const elements: WorldElement[] = world[section.section] as WorldElement[];
+        const elements: WorldElement[] = world[section.section];
         if (!elements || elements.length === 0) return null;
-
+        
         return (
-            <CollapsableArea key={section.section} title={section.title} icon={section.icon}>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
-                    {elements.map(function (element: WorldElement): React.JSX.Element {
-                        return (
-                            <div key={element.id} className="p-4 bg-dark-background/30 rounded-lg border border-secondary/20 hover:border-primary/30 transition-colors">
-                                <h4 className="text-text-primary font-semibold">{element.name}</h4>
-                                {element.description && (
-                                    <p className="text-text-secondary text-sm mt-2 line-clamp-3">{element.description}</p>
-                                )}
-                            </div>
-                        );
-                    })}
-                </div>
-            </CollapsableArea>
+            <Collapse variant="card" key={section.section} title={section.title} icon={section.icon}>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+                        {elements.map(function (element: WorldElement): React.JSX.Element {
+                            return (
+                                <div key={element.id}
+                                     className="p-4 rounded-lg">
+                                    <h4 className="text-text-primary font-semibold">{element.name}</h4>
+                                    {element.description && (
+                                        <p className="text-text-secondary text-sm mt-2 line-clamp-3">{element.description}</p>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+            </Collapse>
         );
     }
-
+    
     return (
         <div className="space-y-6 px-2 pb-4">
             {/* Hero Section */}
-            <div className="p-6 bg-gradient-to-r from-primary/10 via-secondary/20 to-transparent rounded-2xl border border-secondary/30">
-                <div className="flex items-start gap-4">
-                    <div className="w-16 h-16 rounded-xl bg-primary/20 flex items-center justify-center shrink-0">
-                        <FontAwesomeIcon icon={faGlobe} className="w-8 h-8 text-primary"/>
-                    </div>
-                    <div className="flex-1 min-w-0">
-                        <h2 className="text-2xl font-bold text-text-primary">{world.name || '—'}</h2>
-                    </div>
-                </div>
-            </div>
-
+            <DetailHeroSection icon={Globe} title={world.name || '—'}/>
+            
             {/* Histoire du monde - Full width */}
-            <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
-                <div className="flex items-center gap-2 mb-3">
-                    <FontAwesomeIcon icon={faScroll} className="w-4 h-4 text-primary"/>
-                    <h3 className="text-text-primary font-semibold">{t('worldSetting.worldHistory')}</h3>
-                </div>
-                <p className={`whitespace-pre-wrap ${world.history ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
-                    {world.history || '—'}
-                </p>
-            </div>
-
+            <DetailField icon={ScrollText} label={t('worldSetting.worldHistory')} value={world.history}/>
+            
             {/* Politique & Économie - Side by side */}
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
-                    <div className="flex items-center gap-2 mb-3">
-                        <FontAwesomeIcon icon={faLandmark} className="w-4 h-4 text-primary"/>
-                        <h3 className="text-text-primary font-semibold">{t('worldSetting.politics')}</h3>
-                    </div>
-                    <p className={`whitespace-pre-wrap ${world.politics ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
-                        {world.politics || '—'}
-                    </p>
-                </div>
-
-                <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
-                    <div className="flex items-center gap-2 mb-3">
-                        <FontAwesomeIcon icon={faCoins} className="w-4 h-4 text-primary"/>
-                        <h3 className="text-text-primary font-semibold">{t('worldSetting.economy')}</h3>
-                    </div>
-                    <p className={`whitespace-pre-wrap ${world.economy ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
-                        {world.economy || '—'}
-                    </p>
-                </div>
+                <DetailField icon={Landmark} label={t('worldSetting.politics')} value={world.politics}/>
+                <DetailField icon={Coins} label={t('worldSetting.economy')} value={world.economy}/>
             </div>
-
+            
             {/* Religion & Langues - Side by side */}
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
-                    <div className="flex items-center gap-2 mb-3">
-                        <FontAwesomeIcon icon={faChurch} className="w-4 h-4 text-primary"/>
-                        <h3 className="text-text-primary font-semibold">{t('worldSetting.religion')}</h3>
-                    </div>
-                    <p className={`whitespace-pre-wrap ${world.religion ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
-                        {world.religion || '—'}
-                    </p>
-                </div>
-
-                <div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
-                    <div className="flex items-center gap-2 mb-3">
-                        <FontAwesomeIcon icon={faLanguage} className="w-4 h-4 text-primary"/>
-                        <h3 className="text-text-primary font-semibold">{t('worldSetting.languages')}</h3>
-                    </div>
-                    <p className={`whitespace-pre-wrap ${world.languages ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
-                        {world.languages || '—'}
-                    </p>
-                </div>
+                <DetailField icon={Church} label={t('worldSetting.religion')} value={world.religion}/>
+                <DetailField icon={Languages} label={t('worldSetting.languages')} value={world.languages}/>
             </div>
-
+            
             {/* Sections d'éléments - Grille de cards */}
             {elementSections.map(function (section: ElementSection): React.JSX.Element | null {
                 return renderElementSection(section);
diff --git a/components/book/settings/world/settings/WorldSettingsEdit.tsx b/components/book/settings/world/settings/WorldSettingsEdit.tsx
index 066040f..f2a8753 100644
--- a/components/book/settings/world/settings/WorldSettingsEdit.tsx
+++ b/components/book/settings/world/settings/WorldSettingsEdit.tsx
@@ -1,24 +1,24 @@
 'use client';
 import React, {ChangeEvent, Dispatch, SetStateAction} from 'react';
-import {WorldProps, elementSections, ElementSection} from '@/lib/models/World';
-import {SeriesWorldProps} from '@/lib/models/Series';
+import {ElementSection, WorldProps, WorldTextField} from '@/lib/types/world';
+import {elementSections} from '@/lib/constants/world';
+import {SeriesWorldProps} from '@/lib/types/series';
 import {WorldContext} from '@/context/WorldContext';
-import CollapsableArea from '@/components/CollapsableArea';
+import Collapse from '@/components/ui/Collapse';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import TexteAreaInput from '@/components/form/TexteAreaInput';
+import TextAreaInput from '@/components/form/TextAreaInput';
 import SyncFieldWrapper from '@/components/form/SyncFieldWrapper';
 import WorldElementComponent from '@/components/book/settings/world/WorldElement';
-import {faBook, faGlobe, faLandmark} from '@fortawesome/free-solid-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {useTranslations} from 'next-intl';
+import {Book, Globe, Landmark} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
 
 interface WorldSettingsEditProps {
     world: WorldProps;
     worlds: WorldProps[];
     selectedWorldIndex: number;
     setWorlds: Dispatch<SetStateAction<WorldProps[]>>;
-    onWorldFieldChange: (field: keyof WorldProps, value: string) => void;
+    onWorldFieldChange: (field: WorldTextField, value: string) => void;
     seriesWorld?: SeriesWorldProps | null;
     isSeriesMode: boolean;
     onSyncComplete?: () => void;
@@ -30,23 +30,22 @@ interface WorldSettingsEditProps {
  * PAS de scroll interne (géré par parent)
  */
 export default function WorldSettingsEdit({
-    world,
-    worlds,
-    selectedWorldIndex,
-    setWorlds,
-    onWorldFieldChange,
-    seriesWorld,
-    isSeriesMode,
-    onSyncComplete,
-}: WorldSettingsEditProps): React.JSX.Element {
+                                              world,
+                                              worlds,
+                                              selectedWorldIndex,
+                                              setWorlds,
+                                              onWorldFieldChange,
+                                              seriesWorld,
+                                              isSeriesMode,
+                                              onSyncComplete,
+                                          }: WorldSettingsEditProps): React.JSX.Element {
     const t = useTranslations();
-
+    
     return (
         <WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex, isSeriesMode}}>
             <div className="space-y-4 px-2 pb-4">
                 {/* Informations de base */}
-                <CollapsableArea title={t('worldSetting.basicInfo')} icon={faGlobe}>
-                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+                <Collapse variant="card" title={t('worldSetting.basicInfo')} icon={Globe}>
                         <InputField
                             fieldName={t("worldSetting.worldName")}
                             input={
@@ -78,7 +77,7 @@ export default function WorldSettingsEdit({
                                 </SyncFieldWrapper>
                             }
                         />
-
+                        
                         <InputField
                             fieldName={t("worldSetting.worldHistory")}
                             input={
@@ -94,7 +93,7 @@ export default function WorldSettingsEdit({
                                     }}
                                     onSyncComplete={onSyncComplete}
                                 >
-                                    <TexteAreaInput
+                                    <TextAreaInput
                                         value={world.history || ''}
                                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                             onWorldFieldChange('history', e.target.value);
@@ -104,12 +103,10 @@ export default function WorldSettingsEdit({
                                 </SyncFieldWrapper>
                             }
                         />
-                    </div>
-                </CollapsableArea>
+                </Collapse>
 
                 {/* Politique et économie */}
-                <CollapsableArea title={t('worldSetting.politicsEconomy')} icon={faLandmark}>
-                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+                <Collapse variant="card" title={t('worldSetting.politicsEconomy')} icon={Landmark}>
                         <InputField
                             fieldName={t("worldSetting.politics")}
                             input={
@@ -125,7 +122,7 @@ export default function WorldSettingsEdit({
                                     }}
                                     onSyncComplete={onSyncComplete}
                                 >
-                                    <TexteAreaInput
+                                    <TextAreaInput
                                         value={world.politics || ''}
                                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                             onWorldFieldChange('politics', e.target.value);
@@ -135,7 +132,7 @@ export default function WorldSettingsEdit({
                                 </SyncFieldWrapper>
                             }
                         />
-
+                        
                         <InputField
                             fieldName={t("worldSetting.economy")}
                             input={
@@ -151,7 +148,7 @@ export default function WorldSettingsEdit({
                                     }}
                                     onSyncComplete={onSyncComplete}
                                 >
-                                    <TexteAreaInput
+                                    <TextAreaInput
                                         value={world.economy || ''}
                                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                             onWorldFieldChange('economy', e.target.value);
@@ -161,12 +158,10 @@ export default function WorldSettingsEdit({
                                 </SyncFieldWrapper>
                             }
                         />
-                    </div>
-                </CollapsableArea>
+                </Collapse>
 
                 {/* Religion et langues */}
-                <CollapsableArea title={t('worldSetting.cultureLanguages')} icon={faBook}>
-                    <div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+                <Collapse variant="card" title={t('worldSetting.cultureLanguages')} icon={Book}>
                         <InputField
                             fieldName={t("worldSetting.religion")}
                             input={
@@ -182,7 +177,7 @@ export default function WorldSettingsEdit({
                                     }}
                                     onSyncComplete={onSyncComplete}
                                 >
-                                    <TexteAreaInput
+                                    <TextAreaInput
                                         value={world.religion || ''}
                                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                             onWorldFieldChange('religion', e.target.value);
@@ -192,7 +187,7 @@ export default function WorldSettingsEdit({
                                 </SyncFieldWrapper>
                             }
                         />
-
+                        
                         <InputField
                             fieldName={t("worldSetting.languages")}
                             input={
@@ -208,7 +203,7 @@ export default function WorldSettingsEdit({
                                     }}
                                     onSyncComplete={onSyncComplete}
                                 >
-                                    <TexteAreaInput
+                                    <TextAreaInput
                                         value={world.languages || ''}
                                         setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
                                             onWorldFieldChange('languages', e.target.value);
@@ -218,20 +213,17 @@ export default function WorldSettingsEdit({
                                 </SyncFieldWrapper>
                             }
                         />
-                    </div>
-                </CollapsableArea>
-
+                </Collapse>
+                
                 {/* Sections d'éléments */}
                 {elementSections.map(function (section: ElementSection): React.JSX.Element {
                     return (
-                        <CollapsableArea key={section.section} title={section.title} icon={section.icon}>
-                            <div className="p-4 bg-secondary/20 rounded-xl border border-secondary/30">
+                        <Collapse variant="card" key={section.section} title={section.title} icon={section.icon}>
                                 <WorldElementComponent
                                     sectionLabel={section.title}
                                     sectionType={section.section}
                                 />
-                            </div>
-                        </CollapsableArea>
+                        </Collapse>
                     );
                 })}
             </div>
diff --git a/components/book/settings/world/settings/WorldSettingsList.tsx b/components/book/settings/world/settings/WorldSettingsList.tsx
index d5de93f..c51ba94 100644
--- a/components/book/settings/world/settings/WorldSettingsList.tsx
+++ b/components/book/settings/world/settings/WorldSettingsList.tsx
@@ -1,11 +1,13 @@
 'use client';
 import React, {ChangeEvent, useState} from 'react';
-import {WorldProps} from '@/lib/models/World';
+import {WorldProps} from '@/lib/types/world';
 import InputField from '@/components/form/InputField';
 import TextInput from '@/components/form/TextInput';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faChevronRight, faGlobe, faPlus} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {Globe, Plus} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import EntityListItem from '@/components/ui/EntityListItem';
+import EmptyState from '@/components/ui/EmptyState';
+import AvatarIcon from '@/components/ui/AvatarIcon';
 
 interface WorldSettingsListProps {
     worlds: WorldProps[];
@@ -22,28 +24,27 @@ interface WorldSettingsListProps {
  * PAS de scroll interne (géré par parent)
  */
 export default function WorldSettingsList({
-    worlds,
-    onWorldClick,
-    onAddWorld,
-    newWorldName,
-    onNewWorldNameChange,
-}: WorldSettingsListProps): React.JSX.Element {
+                                              worlds,
+                                              onWorldClick,
+                                              onAddWorld,
+                                              newWorldName,
+                                              onNewWorldNameChange,
+                                          }: WorldSettingsListProps): React.JSX.Element {
     const t = useTranslations();
     const [searchQuery, setSearchQuery] = useState<string>('');
-
+    
     function getFilteredWorlds(): WorldProps[] {
         return worlds.filter(function (world: WorldProps): boolean {
             return world.name.toLowerCase().includes(searchQuery.toLowerCase());
         });
     }
-
+    
     const filteredWorlds: WorldProps[] = getFilteredWorlds();
-
+    
     return (
         <div className="space-y-4">
             {/* Recherche et ajout */}
-            <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
-                <div className="grid grid-cols-1 gap-4">
+            <div className="grid grid-cols-1 gap-4">
                     <InputField
                         input={
                             <TextInput
@@ -67,57 +68,29 @@ export default function WorldSettingsList({
                                 placeholder={t('worldSetting.newWorldPlaceholder')}
                             />
                         }
-                        actionIcon={faPlus}
+                        actionIcon={Plus}
                         actionLabel={t('worldSetting.createWorldLabel')}
                         addButtonCallBack={onAddWorld}
                     />
                 </div>
-            </div>
-
+            
             {/* Liste des mondes cliquables */}
             <div className="space-y-2 px-2">
                 {filteredWorlds.length === 0 ? (
-                    <div className="flex flex-col items-center justify-center py-12 text-center">
-                        <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-4">
-                            <FontAwesomeIcon icon={faGlobe} className="text-primary w-10 h-10"/>
-                        </div>
-                        <h3 className="text-text-primary font-semibold text-lg mb-2">
-                            {t('worldSetting.noWorldAvailable')}
-                        </h3>
-                        <p className="text-muted text-sm max-w-xs">
-                            {t('worldSetting.noWorldDescription')}
-                        </p>
-                    </div>
+                    <EmptyState icon={Globe} title={t('worldSetting.noWorldAvailable')}
+                                description={t('worldSetting.noWorldDescription')}/>
                 ) : (
                     filteredWorlds.map(function (world: WorldProps): React.JSX.Element {
                         return (
-                            <div
+                            <EntityListItem
                                 key={world.id}
-                                onClick={function (): void { onWorldClick(world.id); }}
-                                className="group flex items-center p-4 bg-secondary/30 rounded-xl border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md hover:scale-102 transition-all duration-200 hover:border-primary/50"
-                            >
-                                <div className="w-12 h-12 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-md group-hover:scale-110 transition-transform flex items-center justify-center">
-                                    <FontAwesomeIcon icon={faGlobe} className="text-primary w-6 h-6"/>
-                                </div>
-
-                                <div className="ml-4 flex-1 min-w-0">
-                                    <div className="text-text-primary font-bold text-base group-hover:text-primary transition-colors">
-                                        {world.name}
-                                    </div>
-                                    {world.history && (
-                                        <div className="text-text-secondary text-sm mt-0.5 truncate">
-                                            {world.history.substring(0, 60)}{world.history.length > 60 ? '...' : ''}
-                                        </div>
-                                    )}
-                                </div>
-
-                                <div className="w-8 flex justify-center">
-                                    <FontAwesomeIcon
-                                        icon={faChevronRight}
-                                        className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-4 h-4"
-                                    />
-                                </div>
-                            </div>
+                                onClick={function (): void {
+                                    onWorldClick(world.id);
+                                }}
+                                avatar={<AvatarIcon icon={Globe}/>}
+                                title={world.name}
+                                subtitle={world.history ? world.history.substring(0, 60) + (world.history.length > 60 ? '...' : '') : null}
+                            />
                         );
                     })
                 )}
diff --git a/components/editor/DraftCompanion.tsx b/components/editor/DraftCompanion.tsx
index f9f5549..2f34842 100644
--- a/components/editor/DraftCompanion.tsx
+++ b/components/editor/DraftCompanion.tsx
@@ -1,40 +1,33 @@
-import {ChangeEvent, useContext, useEffect, useState} from "react";
+import React, {ChangeEvent, useContext, useEffect, useState} from "react";
 import {Editor, EditorContent, useEditor} from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Underline from "@tiptap/extension-underline";
 import TextAlign from "@tiptap/extension-text-align";
-import System from "@/lib/models/System";
-import {ChapterContext} from "@/context/ChapterContext";
-import {BookContext} from "@/context/BookContext";
-import {SelectBoxProps} from "@/shared/interface";
-import {AlertContext} from "@/context/AlertContext";
-import {SessionContext} from "@/context/SessionContext";
-import {
-    faCubes,
-    faFeather,
-    faGlobe,
-    faMagicWandSparkles,
-    faMapPin,
-    faPalette,
-    faUser
-} from "@fortawesome/free-solid-svg-icons";
-import SubmitButtonWLoading from "@/components/form/SubmitButtonWLoading";
-import QSTextGeneratedPreview from "@/components/QSTextGeneratedPreview";
-import {EditorContext} from "@/context/EditorContext";
-import {useTranslations} from "next-intl";
-import QuillSense from "@/lib/models/QuillSense";
+import {apiGet} from "@/lib/api/client";
+import {configs, isDesktop} from '@/lib/configs';
+import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {textContentToHtml} from "@/lib/utils/html";
+import {ChapterContext, ChapterContextProps} from "@/context/ChapterContext";
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {SelectBoxProps} from "@/components/form/SelectBox";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {Boxes, Feather, Globe, MapPin, Palette, User, Wand2} from "lucide-react";
+import Button from "@/components/ui/Button";
+import QSTextGeneratedPreview from "@/components/ui/QSTextGeneratedPreview";
+import {EditorContext, EditorContextProps} from "@/context/EditorContext";
+import {useTranslations} from '@/lib/i18n';
+import {getSubLevel, isOpenAIEnabled} from "@/lib/utils/quillsense";
 import TextInput from "@/components/form/TextInput";
 import InputField from "@/components/form/InputField";
-import TexteAreaInput from "@/components/form/TexteAreaInput";
+import TextAreaInput from "@/components/form/TextAreaInput";
 import SuggestFieldInput from "@/components/form/SuggestFieldInput";
-import Collapse from "@/components/Collapse";
+import Collapse from "@/components/ui/Collapse";
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import {BookTags} from "@/lib/models/Book";
+import {BookTags} from "@/lib/types/book";
 import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
-import {configs} from "@/lib/configs";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
 import AdvancedGenerationOptions from "@/components/form/AdvancedGenerationOptions";
-import * as tauri from '@/lib/tauri';
 
 interface CompanionContent {
     version: number;
@@ -44,9 +37,8 @@ interface CompanionContent {
 
 export default function DraftCompanion() {
     const t = useTranslations();
-    const {setTotalPrice, setTotalCredits} = useContext<AIUsageContextProps>(AIUsageContext)
-    const {lang} = useContext<LangContextProps>(LangContext)
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
+    const {setTotalPrice, setTotalCredits}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext)
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext)
 
     const mainEditor: Editor | null = useEditor({
         extensions: [
@@ -60,11 +52,12 @@ export default function DraftCompanion() {
         editable: false,
         immediatelyRender: false,
     });
-    const {editor} = useContext(EditorContext);
-    const {chapter} = useContext(ChapterContext);
-    const {book} = useContext(BookContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage, infoMessage} = useContext(AlertContext);
+    const {editor}: EditorContextProps = useContext<EditorContextProps>(EditorContext);
+    const {chapter}: ChapterContextProps = useContext<ChapterContextProps>(ChapterContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage, infoMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
 
     const [draftVersion, setDraftVersion] = useState<number>(0);
     const [draftWordCount, setDraftWordCount] = useState<number>(0);
@@ -100,10 +93,10 @@ export default function DraftCompanion() {
     const [useExplicit, setUseExplicit] = useState<boolean>(false);
     const [useSmart, setUseSmart] = useState<boolean>(false);
     
-    const isGPTEnabled: boolean = QuillSense.isOpenAIEnabled(session);
-    const isSubTierTree: boolean = QuillSense.getSubLevel(session) === 3;
-    const hasAccess: boolean = (isGPTEnabled || isSubTierTree) && !isCurrentlyOffline() && !book?.localBook;
-    
+    const isGPTEnabled: boolean = isOpenAIEnabled(session);
+    const isSubTierTree: boolean = getSubLevel(session) === 3;
+    const hasAccess: boolean = isGPTEnabled || isSubTierTree;
+
     useEffect((): void => {
         getDraftContent().then();
         if (showEnhancer) {
@@ -113,14 +106,11 @@ export default function DraftCompanion() {
     
     async function getDraftContent(): Promise<void> {
         try {
-            let response: CompanionContent | null;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getCompanionContent(
-                    chapter?.chapterId ?? '',
-                    chapter?.chapterContent.version ?? 0,
-                ) as CompanionContent | null;
+            let response: CompanionContent;
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.getCompanionContent(chapter?.chapterId ?? '', chapter?.chapterContent.version ?? 0) as CompanionContent;
             } else {
-                response = await System.authGetQueryToServer<CompanionContent>(`chapter/content/companion`, session.accessToken, lang, {
+                response = await apiGet<CompanionContent>(`chapter/content/companion`, session.accessToken, lang, {
                     bookid: book?.bookId,
                     chapterid: chapter?.chapterId,
                     version: chapter?.chapterContent.version,
@@ -160,11 +150,11 @@ export default function DraftCompanion() {
     
     async function fetchTags(): Promise<void> {
         try {
-            let responseTags: BookTags | null;
-            if (isCurrentlyOffline() || book?.localBook) {
-                responseTags = await tauri.getBookTags(book?.bookId ?? '') as BookTags | null;
+            let responseTags: BookTags;
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                responseTags = await tauri.getBookTags(book?.bookId ?? '') as BookTags;
             } else {
-                responseTags = await System.authGetQueryToServer<BookTags>(`book/tags`, session.accessToken, lang, {
+                responseTags = await apiGet<BookTags>(`book/tags`, session.accessToken, lang, {
                     bookId: book?.bookId
                 });
             }
@@ -190,13 +180,13 @@ export default function DraftCompanion() {
             infoMessage(t("draftCompanion.abortSuccess"));
         }
     }
-    
+
     async function handleQuillSenseRefined(): Promise<void> {
         if (chapter && session?.accessToken) {
             setIsRefining(true);
             setShowRefinedText(false);
             setRefinedText('');
-            
+
             try {
                 const response: Response = await fetch(`${configs.apiUrl}quillsense/refine`, {
                     method: 'POST',
@@ -242,9 +232,9 @@ export default function DraftCompanion() {
                 while (true) {
                     try {
                         const {done, value}: ReadableStreamReadResult<Uint8Array> = await reader.read();
-                        
+
                         if (done) break;
-                        
+
                         const chunk: string = decoder.decode(value, {stream: true});
                         const lines: string[] = chunk.split('\n');
                         
@@ -258,11 +248,12 @@ export default function DraftCompanion() {
                                         useYourKey?: boolean;
                                     } = JSON.parse(dataStr);
                                     
+                                    // Si c'est un chunk de contenu
                                     if ('content' in data && data.content) {
                                         accumulatedText += data.content;
                                         setRefinedText(accumulatedText);
                                     }
-                                    
+                                    // Si c'est le message final avec les totaux
                                     else if ('useYourKey' in data && 'totalPrice' in data) {
                                         if (data.useYourKey) {
                                             setTotalPrice((prev: number): number => prev + data.totalPrice!);
@@ -271,7 +262,7 @@ export default function DraftCompanion() {
                                         }
                                     }
                                 } catch (e: unknown) {
-                                    console.error('Error parsing SSE data:', e);
+                                    errorMessage(t("draftCompanion.sseParsingError"));
                                 }
                             }
                         }
@@ -301,7 +292,7 @@ export default function DraftCompanion() {
             if (editor.getText().length > 0) {
                 editor.commands.insertContent('\n\n');
             }
-            editor.commands.insertContent(System.textContentToHtml(refinedText));
+            editor.commands.insertContent(textContentToHtml(refinedText));
             setShowRefinedText(false);
         }
     }
@@ -430,23 +421,21 @@ export default function DraftCompanion() {
         return (
             <div className="flex flex-col h-full min-h-0 overflow-hidden">
                 <div
-                    className="flex items-center justify-between p-4 bg-secondary/30 backdrop-blur-sm border-b border-secondary/50 flex-shrink-0 shadow-sm">
+                    className="flex items-center justify-between p-4 flex-shrink-0">
                     <h2 className="text-text-primary font-['ADLaM_Display'] text-xl">Amélioration de texte</h2>
-                    <button
-                        onClick={(): void => setShowEnhancer(false)}
-                        className="px-5 py-2.5 bg-secondary/50 hover:bg-secondary text-text-primary rounded-xl transition-all duration-200 hover:scale-105 shadow-md border border-secondary/50 font-medium"
-                    >
+                    <Button variant="secondary" onClick={(): void => setShowEnhancer(false)}>
                         Retour
-                    </button>
+                    </Button>
                 </div>
                 
                 <div className="flex-1 overflow-y-auto p-4 space-y-4 custom-scrollbar">
                     <Collapse
+                        variant="card"
                         title="Style d'écriture"
                         content={
                             <div className="space-y-4">
                                 <InputField
-                                    icon={faPalette}
+                                    icon={Palette}
                                     fieldName={t("ghostWriter.toneAtmosphere")}
                                     input={
                                         <TextInput
@@ -461,11 +450,12 @@ export default function DraftCompanion() {
                     />
                     
                     <Collapse
+                        variant="card"
                         title="Tags contextuels"
                         content={
                             <div className="space-y-4">
                                 <SuggestFieldInput inputFieldName={`Personnages`}
-                                                   inputFieldIcon={faUser}
+                                                   inputFieldIcon={User}
                                                    searchTags={searchCharacters}
                                                    tagued={taguedCharacters}
                                                    handleTagSearch={(e) => handleCharacterSearch(e.target.value)}
@@ -478,7 +468,7 @@ export default function DraftCompanion() {
                                 />
                                 
                                 <SuggestFieldInput inputFieldName={`Lieux`}
-                                                   inputFieldIcon={faMapPin}
+                                                   inputFieldIcon={MapPin}
                                                    searchTags={searchLocations}
                                                    tagued={taguedLocations}
                                                    handleTagSearch={(e) => handleLocationSearch(e.target.value)}
@@ -491,7 +481,7 @@ export default function DraftCompanion() {
                                 />
                                 
                                 <SuggestFieldInput inputFieldName={`Objets`}
-                                                   inputFieldIcon={faCubes}
+                                                   inputFieldIcon={Boxes}
                                                    searchTags={searchObjects}
                                                    tagued={taguedObjects}
                                                    handleTagSearch={(e) => handleObjectSearch(e.target.value)}
@@ -504,7 +494,7 @@ export default function DraftCompanion() {
                                 />
                                 
                                 <SuggestFieldInput inputFieldName={`Éléments mondiaux`}
-                                                   inputFieldIcon={faGlobe}
+                                                   inputFieldIcon={Globe}
                                                    searchTags={searchWorldElements}
                                                    tagued={taguedWorldElements}
                                                    handleTagSearch={(e) => handleWorldElementSearch(e.target.value)}
@@ -519,12 +509,12 @@ export default function DraftCompanion() {
                         }
                     />
                     
-                    <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
+                    <div className="bg-tertiary rounded-xl p-4">
                         <InputField
-                            icon={faMagicWandSparkles}
+                            icon={Wand2}
                             fieldName="Spécifications"
                             input={
-                                <TexteAreaInput
+                                <TextAreaInput
                                     value={specifications}
                                     setValue={(e: ChangeEvent<HTMLTextAreaElement>) => setSpecifications(e.target.value)}
                                     placeholder="Spécifications particulières pour l'amélioration..."
@@ -543,15 +533,15 @@ export default function DraftCompanion() {
                 </div>
                 
                 <div
-                    className="p-5 border-t border-secondary/50 bg-secondary/30 backdrop-blur-sm shrink-0 shadow-inner">
+                    className="p-5 shrink-0">
                     <div className="flex justify-center">
-                        <SubmitButtonWLoading
-                            callBackAction={handleQuillSenseRefined}
+                        <Button
+                            variant="primary"
+                            onClick={handleQuillSenseRefined}
                             isLoading={isRefining}
-                            text={t("draftCompanion.refine")}
                             loadingText={t("draftCompanion.refining")}
-                            icon={faMagicWandSparkles}
-                        />
+                            icon={Wand2}
+                        >{t("draftCompanion.refine")}</Button>
                     </div>
                 </div>
                 {(showRefinedText || isRefining) && (
@@ -571,21 +561,21 @@ export default function DraftCompanion() {
     return (
         <div className="flex flex-col h-full min-h-0 overflow-hidden font-['Lora']">
             <div
-                className="flex items-center justify-between p-4 bg-secondary/30 backdrop-blur-sm border-b border-secondary/50 flex-shrink-0 font-['ADLaM_Display'] shadow-sm">
-                <div className="mr-4 text-primary-light">
+                className="flex items-center justify-between p-4 flex-shrink-0 font-['ADLaM_Display']">
+                <div className="mr-4 text-muted">
                     <span>{t("draftCompanion.words")}: </span>
                     <span className="text-text-primary">{draftWordCount}</span>
                 </div>
                 {
-                    hasAccess && book?.quillsenseEnabled !== false && chapter?.chapterContent.version === 3 && (
+                    book?.quillsenseEnabled !== false && hasAccess && chapter?.chapterContent.version === 3 && (
                         <div className="flex gap-2">
-                            <SubmitButtonWLoading
-                                callBackAction={(): void => setShowEnhancer(true)}
+                            <Button
+                                variant="secondary"
+                                onClick={(): void => setShowEnhancer(true)}
                                 isLoading={isRefining}
-                                text={t("draftCompanion.refine")}
                                 loadingText={t("draftCompanion.refining")}
-                                icon={faFeather}
-                            />
+                                icon={Feather}
+                            >{t("draftCompanion.refine")}</Button>
                         </div>
                     )
                 }
diff --git a/components/editor/NoBookHome.tsx b/components/editor/NoBookHome.tsx
index 715ac88..4e769a0 100644
--- a/components/editor/NoBookHome.tsx
+++ b/components/editor/NoBookHome.tsx
@@ -1,22 +1,21 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faBookOpen} from "@fortawesome/free-solid-svg-icons";
-import {useTranslations} from "next-intl";
+import {BookOpen} from 'lucide-react';
+import React from "react";
+import {useTranslations} from '@/lib/i18n';
 
 export default function NoBookHome() {
     const t = useTranslations();
     
     return (
         <div className="flex items-center justify-center h-full p-8 text-center">
-            <div
-                className="max-w-md bg-tertiary/90 backdrop-blur-sm p-10 rounded-2xl shadow-2xl border border-secondary/50">
-                <FontAwesomeIcon icon={faBookOpen} className={"text-primary w-20 h-20 mb-6 animate-pulse"}/>
+            <div className="bg-tertiary rounded-xl p-10 max-w-md">
+                <BookOpen className={"text-primary w-20 h-20 mb-6 animate-pulse"} strokeWidth={1.75}/>
                 <h3 className="text-2xl font-['ADLaM_Display'] text-text-primary mb-4">{t("noBookHome.title")}</h3>
                 <p className="text-muted mb-6 text-lg leading-relaxed">
                     {t("noBookHome.description")}
                 </p>
                 <div
-                    className="flex items-center justify-center gap-3 text-sm text-muted bg-secondary/30 p-4 rounded-xl border border-secondary/40">
-                    <FontAwesomeIcon icon={faBookOpen} className="text-primary w-5 h-5"/>
+                    className="flex items-center justify-center gap-3 text-sm text-muted bg-secondary p-4 rounded-xl border border-secondary">
+                    <BookOpen className="text-primary w-5 h-5" strokeWidth={1.75}/>
                     <span>{t("noBookHome.hint")}</span>
                 </div>
             </div>
diff --git a/components/editor/ScribeEditor.tsx b/components/editor/ScribeEditor.tsx
index 40f5fa9..de71d58 100644
--- a/components/editor/ScribeEditor.tsx
+++ b/components/editor/ScribeEditor.tsx
@@ -1,15 +1,15 @@
-import {useContext, useState} from "react";
-import {ChapterContext} from "@/context/ChapterContext";
-import {BookContext} from "@/context/BookContext";
-import {SettingBookContext} from "@/context/SettingBookContext";
+import React, {useContext, useState} from "react";
+import {ChapterContext, ChapterContextProps} from "@/context/ChapterContext";
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {SettingBookContext, SettingBookContextProps} from "@/context/SettingBookContext";
 import TextEditor from "./TextEditor";
 import BookList from "@/components/book/BookList";
 import BookSettingOption from "@/components/book/settings/BookSettingOption";
 import NoBookHome from "@/components/editor/NoBookHome";
 
 export default function ScribeEditor() {
-    const {chapter} = useContext(ChapterContext);
-    const {book} = useContext(BookContext);
+    const {chapter}: ChapterContextProps = useContext<ChapterContextProps>(ChapterContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
     
     const [bookSettingId, setBookSettingId] = useState<string>('');
 
diff --git a/components/editor/TextEditor.tsx b/components/editor/TextEditor.tsx
index ec27839..f50b764 100644
--- a/components/editor/TextEditor.tsx
+++ b/components/editor/TextEditor.tsx
@@ -1,48 +1,44 @@
 'use client'
-import {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {EditorContent} from '@tiptap/react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
+import {EditorContent, JSONContent} from '@tiptap/react';
 import {
-    faAlignCenter,
-    faAlignLeft,
-    faAlignRight,
-    faBold,
-    faCog,
-    faFloppyDisk,
-    faGhost,
-    faHeading,
-    faLayerGroup,
-    faListOl,
-    faListUl,
-    faParagraph,
-    faUnderline,
-    faXmark
-} from '@fortawesome/free-solid-svg-icons';
-import {EditorContext} from "@/context/EditorContext";
-import {ChapterContext} from '@/context/ChapterContext';
-import System from '@/lib/models/System';
-import {AlertContext} from '@/context/AlertContext';
-import {SessionContext} from "@/context/SessionContext";
-import {BookContext} from '@/context/BookContext';
+    AlignCenter,
+    AlignJustify,
+    AlignLeft,
+    AlignRight,
+    Bold,
+    Ghost,
+    Heading1,
+    Heading2,
+    Heading3,
+    Layers,
+    List,
+    ListOrdered,
+    LucideIcon,
+    Save,
+    SlidersHorizontal,
+    Underline
+} from 'lucide-react';
+import {EditorContext, EditorContextProps} from "@/context/EditorContext";
+import {ChapterContext, ChapterContextProps} from '@/context/ChapterContext';
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {apiPost} from '@/lib/api/client';
+import {isDesktop} from '@/lib/configs';
+import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
 import DraftCompanion from "@/components/editor/DraftCompanion";
 import GhostWriter from "@/components/ghostwriter/GhostWriter";
-import SubmitButtonWLoading from "@/components/form/SubmitButtonWLoading";
-import CollapsableButton from "@/components/CollapsableButton";
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
+import IconButton from "@/components/ui/IconButton";
 import UserEditorSettings, {EditorDisplaySettings} from "@/components/editor/UserEditorSetting";
-import {useTranslations} from "next-intl";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
-import * as tauri from '@/lib/tauri';
 
 interface ToolbarButton {
     action: () => void;
-    icon: IconDefinition;
+    icon: LucideIcon;
     isActive: boolean;
-    label?: string;
 }
 
 interface EditorClasses {
@@ -57,7 +53,7 @@ interface EditorClasses {
     listItems: string;
 }
 
-const DEFAULT_EDITOR_SETTINGS: EditorDisplaySettings = {
+const defaultEditorSettings: EditorDisplaySettings = {
     zoomLevel: 3,
     indent: 30,
     lineHeight: 1.5,
@@ -67,53 +63,53 @@ const DEFAULT_EDITOR_SETTINGS: EditorDisplaySettings = {
     focusMode: false
 };
 
-const FONT_SIZE_CLASSES = {
+const fontSizeClasses: Record<number, string> = {
     1: 'text-sm',
     2: 'text-base',
     3: 'text-lg',
     4: 'text-xl',
     5: 'text-2xl'
-} as const;
+};
 
-const H1_SIZE_CLASSES = {
+const h1SizeClasses: Record<number, string> = {
     1: 'text-xl',
     2: 'text-2xl',
     3: 'text-3xl',
     4: 'text-4xl',
     5: 'text-5xl'
-} as const;
+};
 
-const H2_SIZE_CLASSES = {
+const h2SizeClasses: Record<number, string> = {
     1: 'text-lg',
     2: 'text-xl',
     3: 'text-2xl',
     4: 'text-3xl',
     5: 'text-4xl'
-} as const;
+};
 
-const H3_SIZE_CLASSES = {
+const h3SizeClasses: Record<number, string> = {
     1: 'text-base',
     2: 'text-lg',
     3: 'text-xl',
     4: 'text-2xl',
     5: 'text-3xl'
-} as const;
+};
 
-const FONT_FAMILY_CLASSES = {
+const fontFamilyClasses: Record<string, string> = {
     'lora': 'Lora',
     'serif': 'font-serif',
     'sans-serif': 'font-sans',
     'monospace': 'font-mono'
-} as const;
+};
 
-const LINE_HEIGHT_CLASSES = {
+const lineHeightClasses: Record<number, string> = {
     1.2: 'leading-tight',
     1.5: 'leading-normal',
     1.75: 'leading-relaxed',
     2: 'leading-loose'
-} as const;
+};
 
-const MAX_WIDTH_CLASSES = {
+const maxWidthClasses: Record<number, string> = {
     600: 'max-w-xl',
     650: 'max-w-2xl',
     700: 'max-w-3xl',
@@ -127,9 +123,9 @@ const MAX_WIDTH_CLASSES = {
     1100: 'max-w-full',
     1150: 'max-w-full',
     1200: 'max-w-full'
-} as const;
+};
 
-function getClosestKey<T extends Record<number, any>>(value: number, obj: T): keyof T {
+function getClosestKey(value: number, obj: Record<number, string>): number {
     const keys: number[] = Object.keys(obj).map(Number).sort((a: number, b: number): number => a - b);
     return keys.reduce((prev: number, curr: number): number =>
         Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev
@@ -138,30 +134,27 @@ function getClosestKey<T extends Record<number, any>>(value: number, obj: T): ke
 
 export default function TextEditor() {
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext)
-    const {editor} = useContext(EditorContext);
-    const {chapter, setChapter} = useContext(ChapterContext);
-    const {book, setBook} = useContext(BookContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {session} = useContext(SessionContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext)
+    const {editor}: EditorContextProps = useContext<EditorContextProps>(EditorContext);
+    const {chapter}: ChapterContextProps = useContext<ChapterContextProps>(ChapterContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
+    
     const [mainTimer, setMainTimer] = useState<number>(0);
     const [showDraftCompanion, setShowDraftCompanion] = useState<boolean>(false);
     const [showGhostWriter, setShowGhostWriter] = useState<boolean>(false);
     const [showUserSettings, setShowUserSettings] = useState<boolean>(false);
     const [isSaving, setIsSaving] = useState<boolean>(false);
-    const [isClosing, setIsClosing] = useState<boolean>(false);
-    const [editorSettings, setEditorSettings] = useState<EditorDisplaySettings>(DEFAULT_EDITOR_SETTINGS);
+    const [editorSettings, setEditorSettings] = useState<EditorDisplaySettings>(defaultEditorSettings);
     const [editorClasses, setEditorClasses] = useState<EditorClasses>({
         base: 'text-lg font-serif leading-normal',
         h1: 'text-3xl font-bold',
         h2: 'text-2xl font-bold',
         h3: 'text-xl font-bold',
         container: 'max-w-3xl',
-        theme: 'bg-tertiary/90 backdrop-blur-sm bg-opacity-25 text-text-primary',
+        theme: 'bg-tertiary text-text-primary',
         paragraph: 'indent-6',
         lists: 'pl-10',
         listItems: 'text-lg'
@@ -171,33 +164,31 @@ export default function TextEditor() {
     const timeoutRef: React.RefObject<number | null> = useRef<number | null>(null);
     
     const updateEditorClasses: (settings: EditorDisplaySettings) => void = useCallback((settings: EditorDisplaySettings): void => {
-        const fontSizeKey = settings.zoomLevel as keyof typeof FONT_SIZE_CLASSES;
-        const h1SizeKey = settings.zoomLevel as keyof typeof H1_SIZE_CLASSES;
-        const h2SizeKey = settings.zoomLevel as keyof typeof H2_SIZE_CLASSES;
-        const h3SizeKey = settings.zoomLevel as keyof typeof H3_SIZE_CLASSES;
-        const fontFamilyKey = settings.fontFamily as keyof typeof FONT_FAMILY_CLASSES;
-        const lineHeightKey = settings.lineHeight as keyof typeof LINE_HEIGHT_CLASSES;
-        const maxWidthKey: number = getClosestKey(settings.maxWidth, MAX_WIDTH_CLASSES);
+        const zoomKey: number = getClosestKey(settings.zoomLevel, fontSizeClasses);
+        const lineHeightKey: number = getClosestKey(settings.lineHeight, lineHeightClasses);
+        const maxWidthKey: number = getClosestKey(settings.maxWidth, maxWidthClasses);
         
-        const indentClass = `indent-${Math.round(settings.indent / 4)}`;
+        const fontFamily: string = fontFamilyClasses[settings.fontFamily] || fontFamilyClasses['lora'];
+        const lineHeight: string = lineHeightClasses[lineHeightKey];
+        const indentClass: string = `indent-${Math.round(settings.indent / 4)}`;
         
-        const baseClass = `${FONT_SIZE_CLASSES[fontSizeKey]} ${FONT_FAMILY_CLASSES[fontFamilyKey]} ${LINE_HEIGHT_CLASSES[lineHeightKey]}`;
-        const h1Class = `${H1_SIZE_CLASSES[h1SizeKey]} font-bold ${FONT_FAMILY_CLASSES[fontFamilyKey]} ${LINE_HEIGHT_CLASSES[lineHeightKey]}`;
-        const h2Class = `${H2_SIZE_CLASSES[h2SizeKey]} font-bold ${FONT_FAMILY_CLASSES[fontFamilyKey]} ${LINE_HEIGHT_CLASSES[lineHeightKey]}`;
-        const h3Class = `${H3_SIZE_CLASSES[h3SizeKey]} font-bold ${FONT_FAMILY_CLASSES[fontFamilyKey]} ${LINE_HEIGHT_CLASSES[lineHeightKey]}`;
-        const containerClass = MAX_WIDTH_CLASSES[maxWidthKey as keyof typeof MAX_WIDTH_CLASSES];
-        const listsClass = `pl-${Math.round((settings.indent + 20) / 4)}`;
+        const baseClass: string = `${fontSizeClasses[zoomKey]} ${fontFamily} ${lineHeight}`;
+        const h1Class: string = `${h1SizeClasses[zoomKey]} font-bold ${fontFamily} ${lineHeight}`;
+        const h2Class: string = `${h2SizeClasses[zoomKey]} font-bold ${fontFamily} ${lineHeight}`;
+        const h3Class: string = `${h3SizeClasses[zoomKey]} font-bold ${fontFamily} ${lineHeight}`;
+        const containerClass: string = maxWidthClasses[maxWidthKey];
+        const listsClass: string = `pl-${Math.round((settings.indent + 20) / 4)}`;
         
         let themeClass: string = '';
         switch (settings.theme) {
             case 'clair':
-                themeClass = 'bg-white text-black';
+                themeClass = 'bg-gray-light text-darkest-background';
                 break;
             case 'sépia':
-                themeClass = 'text-amber-900';
+                themeClass = 'bg-editor-page-sepia text-darkest-background';
                 break;
             default:
-                themeClass = 'bg-tertiary/90 backdrop-blur-sm bg-opacity-25 text-text-primary';
+                themeClass = 'bg-tertiary text-text-primary';
         }
         
         setEditorClasses({
@@ -213,109 +204,99 @@ export default function TextEditor() {
         });
     }, []);
     
-    const containerStyle = useMemo(() => {
-        if (editorSettings.theme === 'sépia') {
-            return {backgroundColor: '#f4f1e8'};
-        }
-        return {};
-    }, [editorSettings.theme]);
+    const editorContainerRef: React.RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
     
-    const toolbarButtons: ToolbarButton[] = (() => {
+    const editorContainerBgClass: string =
+        editorSettings.theme === 'sépia' ? 'bg-editor-page-sepia' : '';
+    
+    const toolbarButtons: ToolbarButton[] = ((): ToolbarButton[] => {
         if (!editor) return [];
 
         return [
             {
                 action: (): boolean => editor.chain().focus().setParagraph().run(),
-                icon: faParagraph,
+                icon: AlignJustify,
                 isActive: editor.isActive('paragraph')
             },
             {
                 action: (): boolean => editor.chain().focus().toggleBold().run(),
-                icon: faBold,
+                icon: Bold,
                 isActive: editor.isActive('bold')
             },
             {
                 action: (): boolean => editor.chain().focus().toggleUnderline().run(),
-                icon: faUnderline,
+                icon: Underline,
                 isActive: editor.isActive('underline')
             },
             {
                 action: (): boolean => editor.chain().focus().setTextAlign('left').run(),
-                icon: faAlignLeft,
+                icon: AlignLeft,
                 isActive: editor.isActive({textAlign: 'left'})
             },
             {
                 action: (): boolean => editor.chain().focus().setTextAlign('center').run(),
-                icon: faAlignCenter,
+                icon: AlignCenter,
                 isActive: editor.isActive({textAlign: 'center'})
             },
             {
                 action: (): boolean => editor.chain().focus().setTextAlign('right').run(),
-                icon: faAlignRight,
+                icon: AlignRight,
                 isActive: editor.isActive({textAlign: 'right'})
             },
             {
                 action: (): boolean => editor.chain().focus().toggleBulletList().run(),
-                icon: faListUl,
+                icon: List,
                 isActive: editor.isActive('bulletList')
             },
             {
                 action: (): boolean => editor.chain().focus().toggleOrderedList().run(),
-                icon: faListOl,
+                icon: ListOrdered,
                 isActive: editor.isActive('orderedList')
             },
             {
                 action: (): boolean => editor.chain().focus().toggleHeading({level: 1}).run(),
-                icon: faHeading,
-                isActive: editor.isActive('heading', {level: 1}),
-                label: '1'
+                icon: Heading1,
+                isActive: editor.isActive('heading', {level: 1})
             },
             {
                 action: (): boolean => editor.chain().focus().toggleHeading({level: 2}).run(),
-                icon: faHeading,
-                isActive: editor.isActive('heading', {level: 2}),
-                label: '2'
+                icon: Heading2,
+                isActive: editor.isActive('heading', {level: 2})
             },
             {
                 action: (): boolean => editor.chain().focus().toggleHeading({level: 3}).run(),
-                icon: faHeading,
-                isActive: editor.isActive('heading', {level: 3}),
-                label: '3'
+                icon: Heading3,
+                isActive: editor.isActive('heading', {level: 3})
             },
         ];
     })();
     
     const saveContent: () => Promise<void> = useCallback(async (): Promise<void> => {
         if (!editor || !chapter) return;
-
+        
         setIsSaving(true);
-        const content = editor.state.doc.toJSON();
+        const content: Record<string, unknown> = editor.state.doc.toJSON();
         const chapterId: string = chapter.chapterId || '';
         const version: number = chapter.chapterContent.version || 0;
-
+        
         try {
             let response: boolean;
-            const saveData = {
-                chapterId,
-                version,
-                content,
-                totalWordCount: editor.getText().length,
-                currentTime: mainTimer
-            };
-            if (isCurrentlyOffline() || book?.localBook){
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
                 response = await tauri.saveChapterContent({
-                    chapterId: saveData.chapterId,
-                    version: saveData.version,
-                    content: saveData.content,
-                    totalWordCount: saveData.totalWordCount,
-                    contentId: saveData.chapterId,
+                    chapterId,
+                    version,
+                    content,
+                    totalWordCount: editor.getText().length,
+                    contentId: '',
                 });
             } else {
-                response = await System.authPostToServer<boolean>(`chapter/content`, saveData, session?.accessToken, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === book?.bookId)) {
-                    addToQueue('save_chapter_content', {data: saveData});
-                }
+                response = await apiPost<boolean>(`chapter/content`, {
+                    chapterId,
+                    version,
+                    content,
+                    totalWordCount: editor.getText().length,
+                    currentTime: mainTimer
+                }, session?.accessToken ?? '');
             }
             if (!response) {
                 errorMessage(t('editor.error.savedFailed'));
@@ -333,7 +314,7 @@ export default function TextEditor() {
             }
             setIsSaving(false);
         }
-    }, [editor, chapter, mainTimer, session?.accessToken, successMessage, errorMessage, addToQueue, book?.localBook, isCurrentlyOffline]);
+    }, [editor, chapter, mainTimer, session?.accessToken, successMessage, errorMessage]);
     
     const handleShowDraftCompanion: () => void = useCallback((): void => {
         setShowDraftCompanion((prev: boolean): boolean => !prev);
@@ -354,21 +335,13 @@ export default function TextEditor() {
         setShowDraftCompanion(false);
         setShowGhostWriter(false);
     }, []);
-
-    const handleCloseBook: () => Promise<void> = useCallback(async (): Promise<void> => {
-        setIsClosing(true);
-        await saveContent();
-        setBook && setBook(null);
-        setChapter && setChapter(undefined);
-        setIsClosing(false);
-    }, [saveContent, setBook, setChapter]);
     
     useEffect((): void => {
         if (!editor) return;
         
         const editorElement: HTMLElement = editor.view.dom;
         if (editorElement) {
-            const indentClasses: string[] = Array.from({length: 21}, (_, i) => `indent-${i}`);
+            const indentClasses: string[] = Array.from({length: 21}, (_: unknown, i: number): string => `indent-${i}`);
             editorElement.classList.remove(...indentClasses);
             
             if (editorClasses.paragraph) {
@@ -384,8 +357,8 @@ export default function TextEditor() {
     useEffect((): () => void => {
         function startTimer(): void {
             if (timerRef.current === null) {
-                timerRef.current = window.setInterval(() => {
-                    setMainTimer(prevTimer => prevTimer + 1);
+                timerRef.current = window.setInterval((): void => {
+                    setMainTimer((prevTimer: number): number => prevTimer + 1);
                 }, 1000);
             }
         }
@@ -431,9 +404,10 @@ export default function TextEditor() {
         if (!editor) return;
         if (chapter?.chapterContent.content) {
             try {
-                const parsedContent = JSON.parse(chapter.chapterContent.content);
+                const parsedContent: JSONContent = JSON.parse(chapter.chapterContent.content);
                 editor.commands.setContent(parsedContent);
-            } catch (error) {
+            } catch (e: unknown) {
+                errorMessage(t('editor.error.parsingContent'));
                 editor.commands.setContent({
                     type: "doc",
                     content: [{type: "paragraph", content: []}]
@@ -463,102 +437,86 @@ export default function TextEditor() {
     }
     
     return (
-        <div className="flex flex-col flex-1 w-full h-full">
+        <div className="flex flex-col flex-1 w-full h-full bg-tertiary">
             <div
-                className={`flex justify-between gap-2 lg:gap-3 border-b border-secondary/30 px-2 lg:px-4 py-2 lg:py-3 bg-gradient-to-b from-dark-background/80 to-dark-background/50 backdrop-blur-sm transition-opacity duration-300 shadow-md overflow-x-auto ${editorSettings.focusMode ? 'opacity-70 hover:opacity-100' : ''}`}>
-                <div className="flex gap-1 flex-shrink-0">
+                className={`flex justify-between items-center gap-3 rounded-xl mx-1 mb-1 px-4 py-2 bg-darkest-background transition-opacity duration-300 ${editorSettings.focusMode ? 'opacity-70 hover:opacity-100' : ''}`}>
+                <div className="flex flex-wrap gap-1">
                     {toolbarButtons.map((button: ToolbarButton, index: number) => (
-                        <button
+                        <IconButton
                             key={index}
+                            icon={button.icon}
+                            variant="ghost"
+                            shape="square"
+                            selected={button.isActive}
                             onClick={button.action}
-                            className={`group flex items-center px-2 lg:px-3 py-1.5 lg:py-2 rounded-lg transition-all duration-200 flex-shrink-0 ${button.isActive ? 'bg-primary text-text-primary shadow-md shadow-primary/30 scale-105' : 'text-muted hover:text-text-primary hover:bg-secondary/50 hover:shadow-sm hover:scale-105'}`}
-                        >
-                            <FontAwesomeIcon icon={button.icon} className={'w-3.5 h-3.5 lg:w-4 lg:h-4 transition-transform duration-200 group-hover:scale-110'}/>
-                            {
-                                button.label &&
-                                <span className="ml-1 lg:ml-2 text-xs lg:text-sm font-medium">
-                                {t(`textEditor.toolbar.${button.label}`)}
-                            </span>
-                            }
-                        </button>
+                        />
                     ))}
                 </div>
-                <div className="flex items-center gap-2 flex-shrink-0">
-                    <CollapsableButton
-                        showCollapsable={showUserSettings}
-                        text={t("textEditor.preferences")}
+                <div className="flex items-center gap-1">
+                    <IconButton
+                        icon={SlidersHorizontal}
+                        variant="ghost"
+                        shape="square"
+                        selected={showUserSettings}
                         onClick={handleShowUserSettings}
-                        icon={faCog}
+                        tooltip={t("textEditor.preferences")}
                     />
-                    {chapter?.chapterContent.version === 2 && !isCurrentlyOffline() && !book?.localBook && book?.quillsenseEnabled !== false && (
-                        <CollapsableButton
-                            showCollapsable={showGhostWriter}
-                            text={t("textEditor.ghostWriter")}
+                    {chapter?.chapterContent.version === 2 && book?.quillsenseEnabled !== false && (
+                        <IconButton
+                            icon={Ghost}
+                            variant="ghost"
+                            shape="square"
+                            selected={showGhostWriter}
                             onClick={handleShowGhostWriter}
-                            icon={faGhost}
+                            tooltip={t("textEditor.ghostWriter")}
                         />
                     )}
                     {chapter?.chapterContent.version && chapter.chapterContent.version > 2 && (
-                        <CollapsableButton
-                            showCollapsable={showDraftCompanion}
-                            text={t("textEditor.draftCompanion")}
+                        <IconButton
+                            icon={Layers}
+                            variant="ghost"
+                            shape="square"
+                            selected={showDraftCompanion}
                             onClick={handleShowDraftCompanion}
-                            icon={faLayerGroup}
+                            tooltip={t("textEditor.draftCompanion")}
                         />
                     )}
-                    <button
+                    <IconButton
+                        icon={Save}
+                        variant="ghost"
+                        shape="square"
                         onClick={saveContent}
-                        disabled={isSaving}
-                        className={`group py-2.5 px-3 lg:px-5 rounded-lg font-semibold transition-all flex items-center justify-center gap-2 relative overflow-hidden ${
-                            isSaving
-                                ? 'bg-secondary cursor-not-allowed opacity-75'
-                                : 'bg-secondary/80 hover:bg-secondary shadow-md hover:shadow-lg hover:shadow-primary/20 hover:scale-105 border border-secondary/50 hover:border-primary/30'
-                        }`}
-                    >
-                        <FontAwesomeIcon icon={faFloppyDisk} className="w-4 h-4 transition-transform group-hover:scale-110 text-primary" />
-                        <span className="hidden lg:inline text-sm text-primary">{isSaving ? t("textEditor.saving") : t("textEditor.save")}</span>
-                    </button>
-                    <button
-                        onClick={handleCloseBook}
-                        disabled={isClosing}
-                        className={`group py-2.5 px-3 lg:px-5 rounded-lg font-semibold transition-all flex items-center justify-center gap-2 relative overflow-hidden ${
-                            isClosing
-                                ? 'bg-secondary/30 cursor-not-allowed opacity-75'
-                                : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-sm hover:scale-105'
-                        }`}
-                    >
-                        <FontAwesomeIcon icon={faXmark} className="w-4 h-4 transition-transform duration-200 group-hover:scale-110" />
-                        <span className="hidden lg:inline text-sm">{t("textEditor.close")}</span>
-                    </button>
+                        tooltip={t("textEditor.save")}
+                    />
                 </div>
             </div>
-
-            <div className="flex justify-between w-full h-full overflow-auto">
+            
+            <div className="flex flex-1 min-h-0 bg-tertiary">
                 <div
-                    className={`flex-1 p-8 overflow-auto transition-all duration-300 ${editorSettings.focusMode ? 'bg-black/20' : ''}`}>
-                    <div
-                        className={`editor-container mx-auto p-6 rounded-2xl shadow-2xl min-h-[80%] border border-secondary/50 ${editorClasses.container} ${editorClasses.theme} relative`}
-                        style={containerStyle}>
+                    className={`flex-1 bg-background rounded-xl mx-1 overflow-hidden transition-all duration-300 ${editorSettings.focusMode ? 'bg-darkest-background' : ''}`}>
+                    <div className="h-full overflow-auto p-4">
                         <div
-                            className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/30 to-transparent"></div>
-                        <div
-                            className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/30 to-transparent"></div>
-                        <EditorContent className={`w-full h-full ${editorClasses.base} editor-content`}
-                                       editor={editor}/>
+                            ref={editorContainerRef}
+                            className={`editor-container mx-auto p-4 rounded-xl min-h-full ${editorClasses.container} ${editorClasses.theme} ${editorContainerBgClass}`}>
+                            <EditorContent className={`w-full h-full ${editorClasses.base} editor-content`}
+                                           editor={editor}/>
+                        </div>
                     </div>
                 </div>
-                
+
                 {(showDraftCompanion || showGhostWriter || showUserSettings) && (
                     <div
-                        className={`w-4/12 transition-opacity duration-300 ${editorSettings.focusMode ? 'opacity-50 hover:opacity-100' : ''}`}>
-                        {showDraftCompanion && <DraftCompanion/>}
-                        {showGhostWriter && <GhostWriter/>}
-                        {showUserSettings && (
-                            <UserEditorSettings
-                                settings={editorSettings}
-                                onSettingsChange={setEditorSettings}
-                            />
-                        )}
+                        className={`w-4/12 bg-darkest-background rounded-xl mx-1 overflow-hidden flex flex-col transition-opacity duration-300 ${editorSettings.focusMode ? 'opacity-50 hover:opacity-100' : ''}`}>
+                        <div className="flex-1 overflow-auto flex flex-col">
+                            {showDraftCompanion && <DraftCompanion/>}
+                            {showGhostWriter && <GhostWriter/>}
+                            {showUserSettings && (
+                                <UserEditorSettings
+                                    settings={editorSettings}
+                                    onSettingsChange={setEditorSettings}
+                                />
+                            )}
+                        </div>
                     </div>
                 )}
             </div>
diff --git a/components/editor/UserEditorSetting.tsx b/components/editor/UserEditorSetting.tsx
index e656cd2..ed280de 100644
--- a/components/editor/UserEditorSetting.tsx
+++ b/components/editor/UserEditorSetting.tsx
@@ -1,9 +1,10 @@
 'use client'
-import {ChangeEvent, useCallback, useEffect, useMemo} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faEye, faFont, faIndent, faPalette, faTextHeight, faTextWidth} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from "next-intl";
+import React, {ChangeEvent, useCallback, useContext, useEffect, useMemo} from 'react';
+import {Baseline, CaseSensitive, Eye, Indent, Palette, Type} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
 import SelectBox from "@/components/form/SelectBox";
+import Button from "@/components/ui/Button";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
 
 interface UserEditorSettingsProps {
     settings: EditorDisplaySettings;
@@ -20,11 +21,15 @@ export interface EditorDisplaySettings {
     focusMode: boolean;
 }
 
-const ZOOM_LABELS = ['Très petit', 'Petit', 'Normal', 'Grand', 'Très grand'] as const;
-const FONT_SIZES = [14, 16, 18, 20, 22] as const;
-const THEMES = ['clair', 'sombre', 'sépia'] as const;
+const zoomLabels = ['Très petit', 'Petit', 'Normal', 'Grand', 'Très grand'] as const;
+const fontSizes = [14, 16, 18, 20, 22] as const;
+const themes = ['clair', 'sombre', 'sépia'] as const;
 
-const DEFAULT_SETTINGS: EditorDisplaySettings = {
+function isValidFontFamily(value: string): value is EditorDisplaySettings['fontFamily'] {
+    return value === 'lora' || value === 'serif' || value === 'sans-serif' || value === 'monospace';
+}
+
+const defaultSettings: EditorDisplaySettings = {
     zoomLevel: 3,
     indent: 30,
     lineHeight: 1.5,
@@ -34,82 +39,91 @@ const DEFAULT_SETTINGS: EditorDisplaySettings = {
     focusMode: false
 };
 
-export default function UserEditorSettings({settings, onSettingsChange}: UserEditorSettingsProps) {
+export default function UserEditorSettings({settings, onSettingsChange}: UserEditorSettingsProps): React.JSX.Element {
     const t = useTranslations();
-    
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+
     const handleSettingChange = useCallback(<K extends keyof EditorDisplaySettings>(
         key: K,
         value: EditorDisplaySettings[K]
-    ) => {
+    ): void => {
         onSettingsChange({...settings, [key]: value});
     }, [settings, onSettingsChange]);
     
-    const resetToDefaults = useCallback(() => {
-        onSettingsChange(DEFAULT_SETTINGS);
+    const resetToDefaults = useCallback((): void => {
+        onSettingsChange(defaultSettings);
     }, [onSettingsChange]);
     
-    const zoomOptions = useMemo(() =>
-            ZOOM_LABELS.map((label, index) => ({
+    const zoomOptions = useMemo((): { value: string; label: string }[] =>
+            zoomLabels.map((label: typeof zoomLabels[number], index: number): { value: string; label: string } => ({
                 value: (index + 1).toString(),
-                label: `${t(`userEditorSettings.zoom.${label}`)} (${FONT_SIZES[index]}px)`
+                label: `${t(`userEditorSettings.zoom.${label}`)} (${fontSizes[index]}px)`
             }))
         , [t]);
     
-    const themeButtons = useMemo(() =>
-            THEMES.map(theme => ({
+    const themeButtons = useMemo((): { key: typeof themes[number]; isActive: boolean; className: string }[] =>
+            themes.map((theme: typeof themes[number]): {
+                key: typeof themes[number];
+                isActive: boolean;
+                className: string
+            } => ({
                 key: theme,
                 isActive: settings.theme === theme,
-                className: `p-2.5 rounded-xl border capitalize transition-all duration-200 font-medium ${
+                className: `p-2.5 rounded-xl border capitalize transition-colors duration-150 font-medium ${
                     settings.theme === theme
-                        ? 'bg-primary text-text-primary border-primary shadow-md scale-105'
-                        : 'bg-secondary/50 border-secondary/50 text-muted hover:text-text-primary hover:border-secondary hover:bg-secondary hover:scale-102'
+                        ? 'bg-secondary text-primary border-primary'
+                        : 'bg-secondary border-secondary text-muted hover:text-text-primary'
                 }`
             }))
         , [settings.theme]);
-    
+
     useEffect((): void => {
         try {
             const savedSettings: string | null = localStorage.getItem('userEditorSettings');
             if (savedSettings) {
-                const parsed = JSON.parse(savedSettings);
+                const parsed: Partial<EditorDisplaySettings> = JSON.parse(savedSettings);
                 if (parsed && typeof parsed === 'object') {
-                    onSettingsChange({...DEFAULT_SETTINGS, ...parsed});
+                    onSettingsChange({...defaultSettings, ...parsed});
                 }
             }
         } catch (e: unknown) {
-            onSettingsChange(DEFAULT_SETTINGS);
+            onSettingsChange(defaultSettings);
         }
     }, [onSettingsChange]);
-    
+
     useEffect((): () => void => {
-        const timeoutId = setTimeout((): void => {
+        const timeoutId: ReturnType<typeof setTimeout> = setTimeout((): void => {
             try {
                 localStorage.setItem('userEditorSettings', JSON.stringify(settings));
-            } catch (error) {
-                console.error('Erreur lors de la sauvegarde des settings:', error);
+            } catch (e: unknown) {
+                if (e instanceof Error) {
+                    errorMessage(t('userEditorSettings.saveError'));
+                } else {
+                    errorMessage(t('userEditorSettings.unknownError'));
+                }
             }
         }, 100);
-        
+
         return (): void => clearTimeout(timeoutId);
     }, [settings]);
     
     return (
         <div
-            className="p-5 bg-secondary/30 backdrop-blur-sm border-l border-secondary/50 h-full overflow-y-auto shadow-inner">
-            <div className="flex items-center gap-3 mb-8 pb-4 border-b border-secondary/50">
-                <FontAwesomeIcon icon={faEye} className="text-primary w-6 h-6"/>
+            className="p-5 h-full overflow-y-auto">
+            <div className="flex items-center gap-3 mb-8 pb-4 border-b border-secondary">
+                <Eye className="text-primary w-6 h-6" strokeWidth={1.75}/>
                 <h3 className="text-xl font-['ADLaM_Display'] text-text-primary">{t("userEditorSettings.displayPreferences")}</h3>
             </div>
             
             <div className="space-y-6">
                 <div>
                     <label className="flex items-center gap-2 mb-2 text-text-primary">
-                        <FontAwesomeIcon icon={faTextHeight} className="text-muted w-5 h-5"/>
+                        <CaseSensitive className="text-muted w-5 h-5" strokeWidth={1.75}/>
                         {t("userEditorSettings.textSize")}
                     </label>
                     <SelectBox
                         defaultValue={settings.zoomLevel.toString()}
-                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>) => {
+                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => {
                             handleSettingChange('zoomLevel', Number(e.target.value))
                         }}
                         data={zoomOptions}
@@ -118,7 +132,7 @@ export default function UserEditorSettings({settings, onSettingsChange}: UserEdi
                 
                 <div>
                     <label className="flex items-center gap-2 mb-2 text-text-primary">
-                        <FontAwesomeIcon icon={faIndent} className="text-muted w-5 h-5"/>
+                        <Indent className="text-muted w-5 h-5" strokeWidth={1.75}/>
                         {t("userEditorSettings.indent")}
                     </label>
                     <div className="space-y-2">
@@ -128,7 +142,7 @@ export default function UserEditorSettings({settings, onSettingsChange}: UserEdi
                             max={50}
                             step={5}
                             value={settings.indent}
-                            onChange={(e) => handleSettingChange('indent', Number(e.target.value))}
+                            onChange={(e: ChangeEvent<HTMLInputElement>): void => handleSettingChange('indent', Number(e.target.value))}
                             className="w-full accent-primary"
                         />
                         <div className="flex justify-between text-sm text-muted">
@@ -141,12 +155,12 @@ export default function UserEditorSettings({settings, onSettingsChange}: UserEdi
                 
                 <div>
                     <label className="flex items-center gap-2 mb-2 text-text-primary">
-                        <FontAwesomeIcon icon={faTextWidth} className="text-muted w-5 h-5"/>
+                        <Baseline className="text-muted w-5 h-5" strokeWidth={1.75}/>
                         {t("userEditorSettings.lineHeight")}
                     </label>
                     <SelectBox
                         defaultValue={settings.lineHeight.toString()}
-                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>) => handleSettingChange('lineHeight', Number(e.target.value))}
+                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => handleSettingChange('lineHeight', Number(e.target.value))}
                         data={[
                             {value: "1.2", label: t("userEditorSettings.lineHeightCompact")},
                             {value: "1.5", label: t("userEditorSettings.lineHeightNormal")},
@@ -158,12 +172,17 @@ export default function UserEditorSettings({settings, onSettingsChange}: UserEdi
                 
                 <div>
                     <label className="flex items-center gap-2 mb-2 text-text-primary">
-                        <FontAwesomeIcon icon={faFont} className="text-muted w-5 h-5"/>
+                        <Type className="text-muted w-5 h-5" strokeWidth={1.75}/>
                         {t("userEditorSettings.fontFamily")}
                     </label>
                     <SelectBox
                         defaultValue={settings.fontFamily}
-                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>) => handleSettingChange('fontFamily', e.target.value as EditorDisplaySettings['fontFamily'])}
+                        onChangeCallBack={(e: ChangeEvent<HTMLSelectElement>): void => {
+                            const fontValue: string = e.target.value;
+                            if (isValidFontFamily(fontValue)) {
+                                handleSettingChange('fontFamily', fontValue);
+                            }
+                        }}
                         data={[
                             {value: "lora", label: t("userEditorSettings.fontLora")},
                             {value: "serif", label: t("userEditorSettings.fontSerif")},
@@ -175,7 +194,7 @@ export default function UserEditorSettings({settings, onSettingsChange}: UserEdi
                 
                 <div>
                     <label className="flex items-center gap-2 mb-2 text-text-primary">
-                        <FontAwesomeIcon icon={faTextWidth} className="text-muted w-5 h-5"/>
+                        <Baseline className="text-muted w-5 h-5" strokeWidth={1.75}/>
                         {t("userEditorSettings.maxWidth")}
                     </label>
                     <div className="space-y-2">
@@ -185,7 +204,7 @@ export default function UserEditorSettings({settings, onSettingsChange}: UserEdi
                             max={1200}
                             step={50}
                             value={settings.maxWidth}
-                            onChange={(e) => handleSettingChange('maxWidth', Number(e.target.value))}
+                            onChange={(e: ChangeEvent<HTMLInputElement>): void => handleSettingChange('maxWidth', Number(e.target.value))}
                             className="w-full accent-primary"
                         />
                         <div className="flex justify-between text-sm text-muted">
@@ -198,14 +217,18 @@ export default function UserEditorSettings({settings, onSettingsChange}: UserEdi
                 
                 <div>
                     <label className="flex items-center gap-2 mb-2 text-text-primary">
-                        <FontAwesomeIcon icon={faPalette} className="text-muted w-5 h-5"/>
+                        <Palette className="text-muted w-5 h-5" strokeWidth={1.75}/>
                         {t("userEditorSettings.theme")}
                     </label>
                     <div className="grid grid-cols-3 gap-2">
-                        {themeButtons.map((themeBtn) => (
+                        {themeButtons.map((themeBtn: {
+                            key: typeof themes[number];
+                            isActive: boolean;
+                            className: string
+                        }) => (
                             <button
                                 key={themeBtn.key}
-                                onClick={() => handleSettingChange('theme', themeBtn.key)}
+                                onClick={(): void => handleSettingChange('theme', themeBtn.key)}
                                 className={themeBtn.className}
                             >
                                 {t(`userEditorSettings.themeOption.${themeBtn.key}`)}
@@ -219,20 +242,17 @@ export default function UserEditorSettings({settings, onSettingsChange}: UserEdi
                         <input
                             type="checkbox"
                             checked={settings.focusMode}
-                            onChange={(e) => handleSettingChange('focusMode', e.target.checked)}
+                            onChange={(e: ChangeEvent<HTMLInputElement>): void => handleSettingChange('focusMode', e.target.checked)}
                             className="w-4 h-4 accent-primary"
                         />
                         <span className="text-text-primary">{t("userEditorSettings.focusMode")}</span>
                     </label>
                 </div>
                 
-                <div className="pt-6 border-t border-secondary/50">
-                    <button
-                        onClick={resetToDefaults}
-                        className="w-full py-2.5 bg-secondary/50 border border-secondary/50 rounded-xl text-muted hover:text-text-primary hover:border-secondary hover:bg-secondary transition-all duration-200 hover:scale-105 shadow-sm hover:shadow-md font-medium"
-                    >
+                <div className="pt-6 border-t border-secondary">
+                    <Button variant="secondary" onClick={resetToDefaults} fullWidth>
                         {t("userEditorSettings.reset")}
-                    </button>
+                    </Button>
                 </div>
             </div>
         </div>
diff --git a/components/form/AddActionButton.tsx b/components/form/AddActionButton.tsx
deleted file mode 100644
index 87ce487..0000000
--- a/components/form/AddActionButton.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faPlus} from "@fortawesome/free-solid-svg-icons";
-import React from "react";
-
-interface AddActionButtonProps {
-    callBackAction: () => Promise<void>;
-}
-
-export default function AddActionButton(
-    {
-        callBackAction
-    }: AddActionButtonProps) {
-    return (
-        <button
-            className={`group p-2 rounded-lg text-muted hover:text-primary hover:bg-primary/10 transition-colors`}
-            onClick={callBackAction}>
-            <FontAwesomeIcon icon={faPlus} className={'w-5 h-5 transition-transform group-hover:rotate-90'}/>
-        </button>
-    )
-}
diff --git a/components/form/AdvancedGenerationOptions.tsx b/components/form/AdvancedGenerationOptions.tsx
index 1405574..ad19be1 100644
--- a/components/form/AdvancedGenerationOptions.tsx
+++ b/components/form/AdvancedGenerationOptions.tsx
@@ -1,61 +1,48 @@
-'use client'
-import React from "react";
-import {faBrain, faTriangleExclamation} from "@fortawesome/free-solid-svg-icons";
-import InputField from "@/components/form/InputField";
-import ToggleWithConfirmation from "@/components/form/ToggleWithConfirmation";
-import {useTranslations} from "next-intl";
-
-interface AdvancedGenerationOptionsProps {
-    useExplicit: boolean;
-    setUseExplicit: (value: boolean) => void;
-    useSmart: boolean;
-    setUseSmart: (value: boolean) => void;
-}
-
-export default function AdvancedGenerationOptions({
-    useExplicit,
-    setUseExplicit,
-    useSmart,
-    setUseSmart
-}: AdvancedGenerationOptionsProps) {
-    const t = useTranslations();
-
-    return (
-        <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
-            <div className="flex justify-evenly items-center">
-                <InputField
-                    icon={faTriangleExclamation}
-                    fieldName={t("generationOptions.explicit.label")}
-                    centered
-                    input={
-                        <ToggleWithConfirmation
-                            checked={useExplicit}
-                            onChange={setUseExplicit}
-                            alertTitle={t("generationOptions.explicit.alertTitle")}
-                            alertMessage={t("generationOptions.explicit.alertMessage")}
-                            alertType="alert"
-                            confirmText={t("generationOptions.activate")}
-                            cancelText={t("generationOptions.cancel")}
-                        />
-                    }
-                />
-                <InputField
-                    icon={faBrain}
-                    fieldName={t("generationOptions.smart.label")}
-                    centered
-                    input={
-                        <ToggleWithConfirmation
-                            checked={useSmart}
-                            onChange={setUseSmart}
-                            alertTitle={t("generationOptions.smart.alertTitle")}
-                            alertMessage={t("generationOptions.smart.alertMessage")}
-                            alertType="informatif"
-                            confirmText={t("generationOptions.activate")}
-                            cancelText={t("generationOptions.cancel")}
-                        />
-                    }
-                />
-            </div>
-        </div>
-    );
-}
+'use client'
+import React from "react";
+import {AlertTriangle, Brain} from "lucide-react";
+import ToggleField from "@/components/form/ToggleField";
+import {useTranslations} from '@/lib/i18n';
+
+interface AdvancedGenerationOptionsProps {
+    useExplicit: boolean;
+    setUseExplicit: (value: boolean) => void;
+    useSmart: boolean;
+    setUseSmart: (value: boolean) => void;
+}
+
+export default function AdvancedGenerationOptions({
+                                                      useExplicit,
+                                                      setUseExplicit,
+                                                      useSmart,
+                                                      setUseSmart
+                                                  }: AdvancedGenerationOptionsProps) {
+    const t = useTranslations();
+
+    return (
+        <div className="flex justify-evenly items-center">
+            <ToggleField
+                icon={AlertTriangle}
+                label={t("generationOptions.explicit.label")}
+                checked={useExplicit}
+                onChange={setUseExplicit}
+                alertTitle={t("generationOptions.explicit.alertTitle")}
+                alertMessage={t("generationOptions.explicit.alertMessage")}
+                alertType="alert"
+                confirmText={t("generationOptions.activate")}
+                cancelText={t("generationOptions.cancel")}
+            />
+            <ToggleField
+                icon={Brain}
+                label={t("generationOptions.smart.label")}
+                checked={useSmart}
+                onChange={setUseSmart}
+                alertTitle={t("generationOptions.smart.alertTitle")}
+                alertMessage={t("generationOptions.smart.alertMessage")}
+                alertType="informatif"
+                confirmText={t("generationOptions.activate")}
+                cancelText={t("generationOptions.cancel")}
+            />
+        </div>
+    );
+}
diff --git a/components/form/CancelButton.tsx b/components/form/CancelButton.tsx
deleted file mode 100644
index 42bed3c..0000000
--- a/components/form/CancelButton.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-
-interface CancelButtonProps {
-    callBackFunction: () => void;
-    text?: string;
-}
-
-export default function CancelButton(
-    {
-        callBackFunction,
-        text = "Annuler"
-    }: CancelButtonProps) {
-    return (
-        <button
-            onClick={callBackFunction}
-            className="px-5 py-2.5 rounded-lg bg-secondary/50 text-text-primary border border-secondary/50 hover:bg-secondary hover:border-secondary hover:shadow-md transition-all duration-200 hover:scale-105 font-medium"
-        >
-            {text}
-        </button>
-    );
-}
diff --git a/components/form/CheckBox.tsx b/components/form/CheckBox.tsx
index 090597c..63fc7ee 100644
--- a/components/form/CheckBox.tsx
+++ b/components/form/CheckBox.tsx
@@ -1,4 +1,4 @@
-import {Dispatch, SetStateAction} from "react";
+import React, {Dispatch, SetStateAction} from "react";
 
 interface CheckBoxProps {
     isChecked: boolean;
@@ -27,15 +27,15 @@ export default function CheckBox(
                     className="hidden"
                 />
                 <label htmlFor={id}
-                       className={`block overflow-hidden h-6 rounded-full cursor-pointer transition-all duration-200 border-2 shadow-sm hover:shadow-md ${
+                       className={`block overflow-hidden h-6 rounded-full cursor-pointer transition-colors duration-150 border-2 ${
                            isChecked
-                               ? 'bg-primary border-primary shadow-primary/30'
-                               : 'bg-secondary/50 border-secondary hover:bg-secondary'
+                               ? 'bg-primary border-primary'
+                               : 'bg-secondary border-secondary hover:bg-secondary'
                        }`}
                 >
                     <span
-                        className={`absolute block h-5 w-5 rounded-full bg-white shadow-md transform transition-all duration-200 top-0.5 ${
-                            isChecked ? 'right-0.5 scale-110' : 'left-0.5'
+                        className={`absolute block h-5 w-5 rounded-full bg-text-primary transform transition-all duration-200 top-0.5 ${
+                            isChecked ? 'right-0.5' : 'left-0.5'
                         }`}/>
                 </label>
             </div>
diff --git a/components/form/ConfirmButton.tsx b/components/form/ConfirmButton.tsx
deleted file mode 100644
index b619290..0000000
--- a/components/form/ConfirmButton.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react";
-
-type ButtonType = 'alert' | 'danger' | 'informatif' | 'success';
-
-interface ConfirmButtonProps {
-    text: string;
-    callBackFunction?: () => void;
-    buttonType?: ButtonType;
-}
-
-export default function ConfirmButton(
-    {
-        text,
-        callBackFunction,
-        buttonType = 'success'
-    }: ConfirmButtonProps) {
-    function getButtonType(alertType: ButtonType): string {
-        switch (alertType) {
-            case 'alert':
-                return 'bg-warning';
-            case 'danger':
-                return 'bg-error';
-            case 'informatif':
-                return 'bg-info';
-            case 'success':
-            default:
-                return 'bg-success';
-        }
-    }
-
-    const applyType: string = getButtonType(buttonType);
-    return (
-        <button
-            onClick={callBackFunction}
-            className={`rounded-lg ${applyType} px-5 py-2.5 text-white font-semibold shadow-md hover:shadow-lg transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-primary/20`}
-        >
-            {text}
-        </button>
-    )
-}
diff --git a/components/form/DatePicker.tsx b/components/form/DatePicker.tsx
index 4743d00..0474aa9 100644
--- a/components/form/DatePicker.tsx
+++ b/components/form/DatePicker.tsx
@@ -1,4 +1,4 @@
-import {ChangeEvent} from "react";
+import React, {ChangeEvent} from "react";
 
 interface DatePickerProps {
     date: string;
@@ -15,7 +15,7 @@ export default function DatePicker(
             type="date"
             value={date}
             onChange={setDate}
-            className="bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50 focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary hover:bg-secondary hover:border-secondary outline-none transition-all duration-200"
+            className="input-base"
         />
     )
 }
diff --git a/components/form/DeleteButton.tsx b/components/form/DeleteButton.tsx
deleted file mode 100644
index 6143fea..0000000
--- a/components/form/DeleteButton.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-'use client';
-import {useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faTrash} from '@fortawesome/free-solid-svg-icons';
-import AlertBox from '@/components/AlertBox';
-
-interface DeleteButtonProps {
-    onDelete: () => void | Promise<void>;
-    confirmTitle: string;
-    confirmMessage: string;
-    confirmButtonText: string;
-    cancelButtonText: string;
-    disabled?: boolean;
-    className?: string;
-}
-
-export default function DeleteButton(
-    {
-        onDelete,
-        confirmTitle,
-        confirmMessage,
-        confirmButtonText,
-        cancelButtonText,
-        disabled = false,
-        className = ''
-    }: DeleteButtonProps
-) {
-    const [showConfirm, setShowConfirm] = useState<boolean>(false);
-
-    function handlePress(): void {
-        if (disabled) return;
-        setShowConfirm(true);
-    }
-
-    async function handleConfirm(): Promise<void> {
-        setShowConfirm(false);
-        await onDelete();
-    }
-
-    function handleCancel(): void {
-        setShowConfirm(false);
-    }
-
-    return (
-        <>
-            <button
-                onClick={handlePress}
-                disabled={disabled}
-                className={`flex items-center justify-center bg-error/90 hover:bg-error w-10 h-10 rounded-xl border border-error shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200 ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
-            >
-                <FontAwesomeIcon icon={faTrash} className="text-text-primary w-5 h-5"/>
-            </button>
-            {showConfirm && (
-                <AlertBox
-                    title={confirmTitle}
-                    message={confirmMessage}
-                    type="danger"
-                    confirmText={confirmButtonText}
-                    cancelText={cancelButtonText}
-                    onConfirm={handleConfirm}
-                    onCancel={handleCancel}
-                />
-            )}
-        </>
-    );
-}
diff --git a/components/form/InlineAddInput.tsx b/components/form/InlineAddInput.tsx
index 1cc2802..86d012d 100644
--- a/components/form/InlineAddInput.tsx
+++ b/components/form/InlineAddInput.tsx
@@ -1,5 +1,6 @@
-import {ChangeEvent, KeyboardEvent, useRef, useState} from "react";
-import AddActionButton from "@/components/form/AddActionButton";
+import React, {ChangeEvent, KeyboardEvent, useRef, useState} from "react";
+import IconButton from "@/components/ui/IconButton";
+import {Plus} from "lucide-react";
 
 interface InlineAddInputProps {
     value: string;
@@ -37,11 +38,11 @@ export default function InlineAddInput(
                     setIsAdding(false);
                 }
             }}
-            className="relative flex items-center gap-1 h-[44px] px-3 bg-secondary/30 rounded-xl border-2 border-dashed border-secondary/50 hover:border-primary/60 hover:bg-secondary/50 cursor-pointer transition-colors duration-200"
+            className="relative flex items-center gap-1 h-[44px] px-3 bg-dark-background rounded-xl border border-secondary hover:border-primary/60 cursor-pointer transition-colors duration-200"
         >
             {showNumericalInput && numericalValue !== undefined && setNumericalValue && (
                 <input
-                    className={`bg-secondary/50 text-primary text-sm px-1.5 py-0.5 rounded border border-secondary/50 transition-all duration-200 !outline-none !ring-0 !shadow-none focus-visible:!outline-none focus-visible:!ring-0 focus-visible:!shadow-none ${isAdding ? 'w-10 opacity-100' : 'w-0 opacity-0 px-0 border-0'}`}
+                    className={`bg-dark-background text-primary text-sm px-1.5 py-0.5 rounded border border-secondary transition-all duration-200 !outline-none !ring-0 !shadow-none focus-visible:!outline-none focus-visible:!ring-0 focus-visible:!shadow-none ${isAdding ? 'w-10 opacity-100' : 'w-0 opacity-0 px-0 border-0'}`}
                     type="number"
                     value={numericalValue}
                     onChange={(e: ChangeEvent<HTMLInputElement>) => setNumericalValue(parseInt(e.target.value))}
@@ -63,7 +64,7 @@ export default function InlineAddInput(
             />
             {isAdding && (
                 <div className="absolute right-1 opacity-100">
-                    <AddActionButton callBackAction={handleAdd}/>
+                    <IconButton icon={Plus} variant="ghost" onClick={handleAdd}/>
                 </div>
             )}
         </li>
diff --git a/components/form/InputField.tsx b/components/form/InputField.tsx
index 189853c..c34492f 100644
--- a/components/form/InputField.tsx
+++ b/components/form/InputField.tsx
@@ -1,20 +1,21 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import React from "react";
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
-import {faPlus, faTrash} from "@fortawesome/free-solid-svg-icons";
+import {LucideIcon, Plus, Trash2} from "lucide-react";
+import IconButton from "@/components/ui/IconButton";
+import Button from "@/components/ui/Button";
+import Badge from "@/components/ui/Badge";
 
 interface InputFieldProps {
-    icon?: IconDefinition,
-    fieldName?: string,
-    input: React.ReactNode,
-    addButtonCallBack?: () => Promise<void>
-    removeButtonCallBack?: () => Promise<void>
-    isAddButtonDisabled?: boolean
-    action?: () => Promise<void>
-    actionLabel?: string
-    actionIcon?: IconDefinition
-    hint?: string,
-    centered?: boolean,
+    icon?: LucideIcon;
+    fieldName?: string;
+    input: React.ReactNode;
+    addButtonCallBack?: () => Promise<void>;
+    removeButtonCallBack?: () => Promise<void>;
+    isAddButtonDisabled?: boolean;
+    action?: () => Promise<void>;
+    actionLabel?: string;
+    actionIcon?: LucideIcon;
+    hint?: string;
+    centered?: boolean;
 }
 
 export default function InputField(
@@ -31,63 +32,51 @@ export default function InputField(
         hint,
         centered = false
     }: InputFieldProps) {
+    
+    function renderIcon(): React.JSX.Element | null {
+        if (!icon) return null;
+        const Icon: LucideIcon = icon;
+        return <Icon className="text-primary w-5 h-5" strokeWidth={1.75}/>;
+    }
+
     return (
         <div className={`flex flex-col ${centered ? 'items-center' : ''}`}>
-            <div className={`flex items-center mb-2 lg:mb-3 flex-wrap gap-2 ${centered ? 'justify-center' : 'justify-between'}`}>
-                {
-                    fieldName && (
-                        <h3 className="text-text-primary text-xl font-[ADLaM Display] font-medium mb-2 flex items-center gap-2">
-                            {
-                                icon && <FontAwesomeIcon icon={icon} className="text-primary w-5 h-5"/>
-                            }
-                            {fieldName}
-                        </h3>
-                    )
-                }
-                {
-                    action && (
-                        <button
-                            onClick={action}
-                            className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-secondary/50 rounded-lg text-primary hover:bg-secondary hover:shadow-md hover:scale-105 transition-all duration-200 border border-secondary/50 font-medium"
-                        >
-                            {
-                                actionIcon && <FontAwesomeIcon icon={actionIcon} className={'w-3.5 h-3.5'}/>
-                            }
-                            {
-                                actionLabel && <span>{actionLabel}</span>
-                            }
-                        </button>
-                    )
-                }
+            <div
+                className={`flex items-center mb-2 lg:mb-3 flex-wrap gap-2 ${centered ? 'justify-center' : 'justify-between'}`}>
+                {fieldName && (
+                    <h3 className="text-text-secondary text-sm font-medium flex items-center gap-2">
+                        {renderIcon()}
+                        {fieldName}
+                    </h3>
+                )}
+                {action && actionIcon && (
+                    <Button variant="secondary" size="sm" icon={actionIcon} onClick={action}>
+                        {actionLabel && <span>{actionLabel}</span>}
+                    </Button>
+                )}
                 {hint && (
-                    <span
-                        className="text-xs text-muted bg-secondary/30 px-3 py-1.5 rounded-lg border border-secondary/30">
-                        {hint}
-                    </span>
+                    <Badge variant="muted" size="sm">{hint}</Badge>
                 )}
             </div>
             <div className={`flex items-center gap-2 ${centered ? 'justify-center' : 'justify-between'}`}>
                 {input}
-                {
-                    addButtonCallBack && (
-                        <button
-                            className="bg-primary text-text-primary w-9 h-9 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 hover:bg-primary-dark hover:shadow-lg hover:scale-110 shadow-md"
-                            onClick={addButtonCallBack}
-                            disabled={isAddButtonDisabled}>
-                            <FontAwesomeIcon icon={faPlus} className="w-4 h-4"/>
-                        </button>
-                    )
-                }
-                {
-                    removeButtonCallBack && (
-                        <button
-                            className="bg-error/90 hover:bg-error text-text-primary w-9 h-9 rounded-full flex items-center justify-center transition-all duration-200 hover:shadow-lg hover:scale-110 shadow-md"
-                            onClick={removeButtonCallBack}
-                        >
-                            <FontAwesomeIcon icon={faTrash} className={'w-4 h-4'}/>
-                        </button>
-                    )
-                }
+                {addButtonCallBack && (
+                    <IconButton
+                        icon={Plus}
+                        variant="ghost"
+                        shape="square"
+                        onClick={addButtonCallBack}
+                        disabled={isAddButtonDisabled}
+                    />
+                )}
+                {removeButtonCallBack && (
+                    <IconButton
+                        icon={Trash2}
+                        variant="danger"
+                        shape="square"
+                        onClick={removeButtonCallBack}
+                    />
+                )}
             </div>
         </div>
     )
diff --git a/components/form/NumberInput.tsx b/components/form/NumberInput.tsx
index dd0bfcb..10d89d4 100644
--- a/components/form/NumberInput.tsx
+++ b/components/form/NumberInput.tsx
@@ -42,13 +42,7 @@ export default function NumberInput(
             type="number"
             value={value ?? ''}
             onChange={handleChange}
-            className={`w-full bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50
-                focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary
-                hover:bg-secondary hover:border-secondary
-                placeholder:text-muted/60
-                outline-none transition-all duration-200
-                ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
-                ${readOnly ? 'cursor-default' : ''}`}
+            className="input-base"
             placeholder={placeholder}
             readOnly={readOnly}
             disabled={disabled}
diff --git a/components/form/RadioBox.tsx b/components/form/RadioBox.tsx
index b4e4aee..2445824 100644
--- a/components/form/RadioBox.tsx
+++ b/components/form/RadioBox.tsx
@@ -1,7 +1,6 @@
-import {storyStates} from "@/lib/models/Story";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faBookOpen, faKeyboard, faMagicWandSparkles, faPalette, faPenNib} from "@fortawesome/free-solid-svg-icons";
-import {Dispatch, SetStateAction} from "react";
+import {storyStates} from "@/lib/constants/story";
+import {BookOpen, Keyboard, LucideIcon, Palette, PenLine, Wand2} from "lucide-react";
+import React, {Dispatch, SetStateAction} from "react";
 
 export interface RadioBoxValue {
     label: string;
@@ -14,6 +13,8 @@ interface RadioBoxProps {
     name: string;
 }
 
+const storyStateIcons: LucideIcon[] = [PenLine, Keyboard, Palette, BookOpen, Wand2];
+
 export default function RadioBox(
     {
         selected,
@@ -22,41 +23,36 @@ export default function RadioBox(
     }: RadioBoxProps) {
     return (
         <div className="flex flex-wrap gap-2">
-            {storyStates.map((option: RadioBoxValue) => (
-                <div key={option.value} className="flex items-center">
-                    <input
-                        type="radio"
-                        id={option.label}
-                        name={name}
-                        value={option.value}
-                        checked={selected === option.value}
-                        onChange={() => setSelected(option.value)}
-                        className="hidden"
-                    />
-                    <label
-                        htmlFor={option.label}
-                        className={`px-3 lg:px-4 py-2 lg:py-2.5 text-xs lg:text-sm font-medium rounded-xl cursor-pointer transition-all duration-200 flex items-center gap-2 ${
-                            selected === option.value
-                                ? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105 border border-primary-dark'
-                                : 'bg-secondary/50 text-muted hover:bg-secondary hover:text-text-primary hover:scale-105 border border-secondary/50 hover:border-secondary'
-                        }`}
-                    >
-                        <FontAwesomeIcon
-                            icon={
-                                [
-                                    faPenNib,
-                                    faKeyboard,
-                                    faPalette,
-                                    faBookOpen,
-                                    faMagicWandSparkles
-                                ][option.value]
-                            }
-                            className={selected === option.value ? "text-text-primary w-5 h-5" : "text-muted w-5 h-5"}
+            {storyStates.map((option: RadioBoxValue) => {
+                const Icon = storyStateIcons[option.value];
+                return (
+                    <div key={option.value} className="flex items-center">
+                        <input
+                            type="radio"
+                            id={option.label}
+                            name={name}
+                            value={option.value}
+                            checked={selected === option.value}
+                            onChange={() => setSelected(option.value)}
+                            className="hidden"
                         />
-                        {option.label}
-                    </label>
-                </div>
-            ))}
+                        <label
+                            htmlFor={option.label}
+                            className={`px-3 lg:px-4 py-2 lg:py-2.5 text-xs lg:text-sm font-medium rounded-xl cursor-pointer transition-colors duration-150 flex items-center gap-2 ${
+                                selected === option.value
+                                    ? 'bg-secondary text-primary border border-primary'
+                                    : 'bg-secondary text-text-secondary hover:text-text-primary border border-secondary'
+                            }`}
+                        >
+                            <Icon
+                                className={selected === option.value ? "text-text-primary w-5 h-5" : "text-muted w-5 h-5"}
+                                strokeWidth={1.75}
+                            />
+                            {option.label}
+                        </label>
+                    </div>
+                );
+            })}
         </div>
     )
 }
diff --git a/components/form/RadioGroup.tsx b/components/form/RadioGroup.tsx
index e26c6bc..2ab8cce 100644
--- a/components/form/RadioGroup.tsx
+++ b/components/form/RadioGroup.tsx
@@ -36,10 +36,10 @@ export default function RadioGroup(
                     />
                     <label
                         htmlFor={`${name}-${option.value}`}
-                        className={`px-4 py-2 rounded-lg cursor-pointer transition-all duration-200 text-sm font-medium border ${
+                        className={`px-4 py-2 rounded-lg cursor-pointer transition-colors duration-150 text-sm font-medium border ${
                             value === option.value
-                                ? 'bg-primary/20 text-primary border-primary/40 shadow-md'
-                                : 'bg-secondary/30 text-text-primary border-secondary/50 hover:bg-secondary hover:border-secondary hover:scale-105'
+                                ? 'bg-secondary text-primary border-primary'
+                                : 'bg-secondary text-text-secondary border-secondary hover:text-text-primary'
                         }`}
                     >
                         {option.label}
diff --git a/components/form/SearchInputWithSelect.tsx b/components/form/SearchInputWithSelect.tsx
index b236dcc..ff34135 100644
--- a/components/form/SearchInputWithSelect.tsx
+++ b/components/form/SearchInputWithSelect.tsx
@@ -1,7 +1,7 @@
-import {ChangeEvent} from "react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
-import {SelectBoxProps} from "@/shared/interface";
+import React, {ChangeEvent} from "react";
+import {LucideIcon} from "lucide-react";
+import {SelectBoxProps} from "@/components/form/SelectBox";
+import IconButton from "@/components/ui/IconButton";
 
 interface SearchInputWithSelectProps {
     selectValue: string;
@@ -10,7 +10,7 @@ interface SearchInputWithSelectProps {
     inputValue: string;
     setInputValue: (value: string) => void;
     inputPlaceholder?: string;
-    searchIcon: IconDefinition;
+    searchIcon: LucideIcon;
     onSearch: () => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
@@ -32,7 +32,7 @@ export default function SearchInputWithSelect(
             <select
                 value={selectValue}
                 onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectValue(e.target.value)}
-                className="bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50 focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary hover:bg-secondary hover:border-secondary outline-none transition-all duration-200 font-medium"
+                className="input-base cursor-pointer font-medium w-auto"
             >
                 {selectOptions.map((option: SelectBoxProps) => (
                     <option key={option.value} value={option.value}>
@@ -40,22 +40,19 @@ export default function SearchInputWithSelect(
                     </option>
                 ))}
             </select>
-            
+
             <div className="flex-1 relative">
                 <input
                     type="text"
                     value={inputValue}
                     onChange={(e: ChangeEvent<HTMLInputElement>) => setInputValue(e.target.value)}
                     placeholder={inputPlaceholder}
-                    className="w-full bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50 focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary hover:bg-secondary hover:border-secondary placeholder:text-muted/60 outline-none transition-all duration-200 pr-12"
+                    className="input-base pr-12"
                     onKeyDown={onKeyDown}
                 />
-                <button
-                    onClick={onSearch}
-                    className="absolute right-0 top-0 h-full px-4 text-primary hover:text-primary-light hover:scale-110 transition-all duration-200"
-                >
-                    <FontAwesomeIcon icon={searchIcon} className="w-5 h-5"/>
-                </button>
+                <div className="absolute right-1 top-1/2 -translate-y-1/2">
+                    <IconButton icon={searchIcon} variant="ghost" onClick={onSearch}/>
+                </div>
             </div>
         </div>
     );
diff --git a/components/form/SelectBox.tsx b/components/form/SelectBox.tsx
index ace97b5..c35a50c 100644
--- a/components/form/SelectBox.tsx
+++ b/components/form/SelectBox.tsx
@@ -1,12 +1,26 @@
-import {ChangeEvent} from "react";
-import {SelectBoxProps} from "@/shared/interface";
+import React, {ChangeEvent} from "react";
+import {useTranslations} from '@/lib/i18n';
+
+export interface SelectBoxProps {
+    label: string;
+    value: string;
+}
+
+type InputSize = 'sm' | 'md' | 'lg';
+const sizeClasses: Record<InputSize, string> = {
+    sm: 'px-3 py-1.5 text-xs rounded-lg',
+    md: 'px-4 py-2.5 text-sm rounded-xl',
+    lg: 'px-5 py-3 text-base rounded-xl',
+};
 
 export interface SelectBoxFormProps {
     onChangeCallBack: (event: ChangeEvent<HTMLSelectElement>) => void,
     data: SelectBoxProps[],
     defaultValue: string | null | undefined,
     placeholder?: string,
-    disabled?: boolean
+    disabled?: boolean,
+    size?: InputSize,
+    translate?: boolean
 }
 
 export default function SelectBox(
@@ -15,26 +29,24 @@ export default function SelectBox(
         data,
         defaultValue,
         placeholder,
-        disabled
+        disabled,
+        size = 'md',
+        translate = false
     }: SelectBoxFormProps) {
+    const t = useTranslations();
     return (
         <select
             onChange={onChangeCallBack}
             disabled={disabled}
             key={defaultValue || 'placeholder'}
             defaultValue={defaultValue || '0'}
-            className={`w-full text-text-primary bg-secondary/50 hover:bg-secondary px-4 py-2.5 rounded-xl
-                border border-secondary/50
-                focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary
-                hover:border-secondary
-                outline-none transition-all duration-200 cursor-pointer
-                ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+            className={`input-base ${sizeClasses[size]}`}
         >
             {placeholder && <option value={'0'}>{placeholder}</option>}
             {
                 data.map((item: SelectBoxProps) => (
                     <option key={item.value} value={item.value} className="bg-tertiary text-text-primary">
-                        {item.label}
+                        {translate ? t(item.label) : item.label}
                     </option>
                 ))
             }
diff --git a/components/form/SeriesImportSelector.tsx b/components/form/SeriesImportSelector.tsx
index f071008..d130e5f 100644
--- a/components/form/SeriesImportSelector.tsx
+++ b/components/form/SeriesImportSelector.tsx
@@ -1,9 +1,9 @@
 'use client'
 import React, {useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faDownload, faSpinner} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
+import {Download} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
 import SelectBox from '@/components/form/SelectBox';
+import InputField from '@/components/form/InputField';
 
 interface SeriesImportItem {
     id: string;
@@ -18,19 +18,19 @@ interface SeriesImportSelectorProps {
 }
 
 export default function SeriesImportSelector({
-    availableItems,
-    onImport,
-    placeholder,
-    label
-}: SeriesImportSelectorProps) {
+                                                 availableItems,
+                                                 onImport,
+                                                 placeholder,
+                                                 label
+                                             }: SeriesImportSelectorProps) {
     const t = useTranslations();
-
+    
     const [selectedId, setSelectedId] = useState<string>('');
     const [isImporting, setIsImporting] = useState<boolean>(false);
-
+    
     async function handleImport(): Promise<void> {
         if (!selectedId || isImporting) return;
-
+        
         setIsImporting(true);
         try {
             await onImport(selectedId);
@@ -39,50 +39,36 @@ export default function SeriesImportSelector({
             setIsImporting(false);
         }
     }
-
+    
     if (availableItems.length === 0) {
         return null;
     }
-
+    
     const selectData = availableItems.map((item) => ({
         label: item.name,
         value: item.id
     }));
-
+    
     return (
         <div className="bg-primary/10 border border-primary/30 rounded-xl p-4 mb-4">
             {label && (
                 <h4 className="text-sm font-medium text-primary mb-3 flex items-center gap-2">
-                    <FontAwesomeIcon icon={faDownload} className="w-4 h-4"/>
+                    <Download className="w-4 h-4" strokeWidth={1.75}/>
                     {label}
                 </h4>
             )}
-            <div className="flex items-center gap-3">
-                <div className="flex-grow">
+            <InputField
+                input={
                     <SelectBox
                         onChangeCallBack={(e) => setSelectedId(e.target.value)}
                         data={selectData}
                         defaultValue={selectedId}
                         placeholder={placeholder}
                     />
-                </div>
-                <button
-                    onClick={handleImport}
-                    disabled={!selectedId || isImporting}
-                    className={`px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-all duration-200 ${
-                        selectedId && !isImporting
-                            ? 'bg-primary text-white hover:bg-primary-dark hover:scale-105'
-                            : 'bg-secondary/50 text-muted cursor-not-allowed'
-                    }`}
-                >
-                    {isImporting ? (
-                        <FontAwesomeIcon icon={faSpinner} className="w-4 h-4 animate-spin"/>
-                    ) : (
-                        <FontAwesomeIcon icon={faDownload} className="w-4 h-4"/>
-                    )}
-                    {t('seriesImport.importButton')}
-                </button>
-            </div>
+                }
+                addButtonCallBack={handleImport}
+                isAddButtonDisabled={!selectedId || isImporting}
+            />
         </div>
     );
 }
diff --git a/components/form/SubmitButtonWLoading.tsx b/components/form/SubmitButtonWLoading.tsx
deleted file mode 100644
index e7e3f46..0000000
--- a/components/form/SubmitButtonWLoading.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import React from "react";
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
-import {faSpinner} from "@fortawesome/free-solid-svg-icons";
-
-interface SubmitButtonWLoadingProps {
-    callBackAction: () => Promise<void> | void;
-    isLoading: boolean;
-    text: string;
-    loadingText: string;
-    icon?: IconDefinition;
-}
-
-export default function SubmitButtonWLoading(
-    {
-        callBackAction,
-        isLoading,
-        icon,
-        text,
-        loadingText
-    }: SubmitButtonWLoadingProps) {
-    return (
-        <button
-            onClick={callBackAction}
-            disabled={isLoading}
-            className={`group py-2.5 px-5 rounded-lg font-semibold transition-all flex items-center justify-center gap-2 relative overflow-hidden ${
-                isLoading
-                    ? 'bg-secondary cursor-not-allowed opacity-75'
-                    : 'bg-secondary/80 hover:bg-secondary shadow-md hover:shadow-lg hover:shadow-primary/20 hover:scale-105 border border-secondary/50 hover:border-primary/30'
-            }`}
-        >
-            <span
-                className={`flex items-center gap-2 transition-all duration-200 ${isLoading ? 'opacity-0' : 'opacity-100'} text-primary`}>
-                {
-                    icon &&
-                    <FontAwesomeIcon icon={icon} className={'w-4 h-4 transition-transform group-hover:scale-110'}/>
-                }
-                <span className="text-sm">{text}</span>
-            </span>
-            {isLoading && (
-                <div className="absolute inset-0 flex items-center justify-center bg-secondary/50 backdrop-blur-sm">
-                    <FontAwesomeIcon icon={faSpinner} className="w-4 h-4 text-primary animate-spin"/>
-                    <span className="ml-3 text-primary text-sm font-medium">
-                        <span className="hidden sm:inline">
-                            {loadingText}
-                        </span>
-                        <span className="sm:hidden">
-                            {loadingText}
-                        </span>
-                    </span>
-                </div>
-            )}
-        </button>
-    )
-}
diff --git a/components/form/SuggestFieldInput.tsx b/components/form/SuggestFieldInput.tsx
index e530a1a..c1bff56 100644
--- a/components/form/SuggestFieldInput.tsx
+++ b/components/form/SuggestFieldInput.tsx
@@ -1,11 +1,13 @@
-import {SelectBoxProps} from "@/shared/interface";
-import {ChangeEvent, Dispatch, SetStateAction} from "react";
+import {SelectBoxProps} from "@/components/form/SelectBox";
+import React, {ChangeEvent, Dispatch, SetStateAction} from "react";
+import {LucideIcon} from "lucide-react";
 import InputField from "@/components/form/InputField";
 import TextInput from "@/components/form/TextInput";
+import Badge from "@/components/ui/Badge";
 
 interface SuggestFieldInputProps {
     inputFieldName: string;
-    inputFieldIcon?: any;
+    inputFieldIcon?: LucideIcon;
     searchTags: string;
     tagued: string[];
     handleTagSearch: (e: ChangeEvent<HTMLInputElement>) => void;
@@ -32,7 +34,7 @@ export default function SuggestFieldInput(
         getTagLabel
     }: SuggestFieldInputProps) {
     return (
-        <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
+        <div>
             <InputField fieldName={inputFieldName} icon={inputFieldIcon} input={
                 <div className="w-full mb-3 relative">
                     <TextInput value={searchTags} setValue={handleTagSearch}
@@ -40,11 +42,11 @@ export default function SuggestFieldInput(
                                placeholder="Rechercher et ajouter..."/>
                     {showTagSuggestions && filteredTags().length > 0 && (
                         <div
-                            className="absolute top-full left-0 right-0 z-10 mt-2 bg-tertiary border border-secondary/50 rounded-xl shadow-2xl max-h-48 overflow-y-auto backdrop-blur-sm">
+                            className="absolute top-full left-0 right-0 z-10 mt-2 bg-tertiary rounded-xl max-h-48 overflow-y-auto">
                             {filteredTags().map((character: SelectBoxProps) => (
                                 <button
                                     key={character.value}
-                                    className="w-full text-left px-4 py-2.5 hover:bg-secondary/70 text-text-primary transition-all hover:pl-5 first:rounded-t-xl last:rounded-b-xl font-medium"
+                                    className="w-full text-left px-4 py-2.5 hover:bg-secondary text-text-primary transition-colors duration-150 first:rounded-t-xl last:rounded-b-xl font-medium"
                                     onClick={() => handleAddTag(character.value)}
                                 >
                                     {character.label}
@@ -59,18 +61,15 @@ export default function SuggestFieldInput(
                     <p className="text-text-secondary text-sm italic">Aucun élément ajouté</p>
                 ) : (
                     tagued.map((tag: string) => (
-                        <div
-                            key={tag}
-                            className="group bg-primary/90 text-white rounded-full px-4 py-1.5 text-sm font-medium flex items-center gap-2 shadow-md hover:shadow-lg hover:scale-105 transition-all border border-primary-dark"
-                        >
+                        <Badge key={tag} variant="primary" size="md" interactive>
                             <span>{getTagLabel(tag)}</span>
                             <button
                                 onClick={() => handleRemoveTag(tag)}
-                                className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-white/20 transition-all group-hover:scale-110 text-base font-bold"
+                                className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-text-primary/20 transition-colors duration-150 text-base font-bold"
                             >
                                 ×
                             </button>
-                        </div>
+                        </Badge>
                     ))
                 )}
             </div>
diff --git a/components/form/SyncFieldWrapper.tsx b/components/form/SyncFieldWrapper.tsx
index e5859a7..c61df68 100644
--- a/components/form/SyncFieldWrapper.tsx
+++ b/components/form/SyncFieldWrapper.tsx
@@ -1,18 +1,12 @@
 'use client'
 import React, {ReactNode, useContext, useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faArrowDown, faArrowUp, faSpinner} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
-import {SessionContext} from '@/context/SessionContext';
-import {AlertContext} from '@/context/AlertContext';
+import {ArrowDown, ArrowUp} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
 import {LangContext, LangContextProps} from '@/context/LangContext';
-import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from '@/context/SyncQueueContext';
-import {BooksSyncContext, BooksSyncContextProps} from '@/context/BooksSyncContext';
-import {BookContext} from '@/context/BookContext';
-import {SyncedBook} from '@/lib/models/SyncedBook';
-import System from '@/lib/models/System';
-import * as tauri from '@/lib/tauri';
+import {apiPost} from '@/lib/api/client';
+import IconButton from '@/components/ui/IconButton';
 
 export type SyncElementType = 'character' | 'world' | 'location' | 'spell';
 
@@ -34,59 +28,42 @@ interface SeriesSyncUploadResponse {
 }
 
 export default function SyncFieldWrapper({
-    children,
-    seriesElementId,
-    seriesValue,
-    currentValue,
-    bookElementId,
-    field,
-    elementType,
-    onDownload,
-    onSyncComplete
-}: SyncFieldWrapperProps) {
+                                             children,
+                                             seriesElementId,
+                                             seriesValue,
+                                             currentValue,
+                                             bookElementId,
+                                             field,
+                                             elementType,
+                                             onDownload,
+                                             onSyncComplete
+                                         }: SyncFieldWrapperProps) {
     const t = useTranslations();
-    const {session} = useContext(SessionContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {book} = useContext(BookContext);
-
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    
     const [isUploading, setIsUploading] = useState<boolean>(false);
-
+    
     const isLinkedToSeries: boolean = !!seriesElementId;
     const hasSeriesDiff: boolean = isLinkedToSeries && seriesValue !== currentValue;
-
+    
     async function handleUpload(): Promise<void> {
         if (!seriesElementId || isUploading) return;
-
+        
         setIsUploading(true);
         try {
-            const requestData = {
-                type: elementType,
-                bookElementId: bookElementId,
-                field: field,
-                value: currentValue
-            };
-
-            let response: SeriesSyncUploadResponse;
-
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.seriesSyncUpload(requestData) as SeriesSyncUploadResponse;
-            } else {
-                response = await System.authPostToServer<SeriesSyncUploadResponse>(
-                    'series/propagate',
-                    requestData,
-                    session.accessToken,
-                    lang
-                );
-
-                if (book?.bookId && localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === book.bookId)) {
-                    addToQueue('series_sync_upload', {data: requestData});
-                }
-            }
-
+            const response: SeriesSyncUploadResponse = await apiPost<SeriesSyncUploadResponse>(
+                'series/propagate',
+                {
+                    type: elementType,
+                    bookElementId: bookElementId,
+                    field: field,
+                    value: currentValue
+                },
+                session.accessToken,
+                lang
+            );
             if (response.success) {
                 successMessage(t('syncField.uploadSuccess', {count: response.updatedCount}));
                 if (onSyncComplete) {
@@ -101,50 +78,38 @@ export default function SyncFieldWrapper({
             setIsUploading(false);
         }
     }
-
+    
     function handleDownload(): void {
         onDownload();
     }
-
+    
     if (!isLinkedToSeries) {
         return <>{children}</>;
     }
-
+    
     return (
-        <div className="flex items-start gap-2 w-full">
-            <button
+        <div className="flex items-center gap-2 w-full">
+            <IconButton
+                icon={ArrowDown}
+                variant={hasSeriesDiff ? 'primary' : 'muted'}
+                size="sm"
                 onClick={handleDownload}
                 disabled={!hasSeriesDiff}
-                title={t('syncField.downloadTooltip')}
-                className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition-all duration-200 ${
-                    hasSeriesDiff
-                        ? 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/40 hover:scale-110 cursor-pointer'
-                        : 'bg-secondary/30 text-muted cursor-not-allowed opacity-50'
-                }`}
-            >
-                <FontAwesomeIcon icon={faArrowDown} className="w-3.5 h-3.5"/>
-            </button>
+                tooltip={t('syncField.downloadTooltip')}
+            />
 
             <div className="flex-grow">
                 {children}
             </div>
-
-            <button
+            
+            <IconButton
+                icon={ArrowUp}
+                variant={hasSeriesDiff && !isUploading ? 'primary' : 'muted'}
+                size="sm"
                 onClick={handleUpload}
                 disabled={isUploading || !hasSeriesDiff}
-                title={t('syncField.uploadTooltip')}
-                className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition-all duration-200 ${
-                    hasSeriesDiff && !isUploading
-                        ? 'bg-primary/20 text-primary hover:bg-primary/40 hover:scale-110 cursor-pointer'
-                        : 'bg-secondary/30 text-muted cursor-not-allowed opacity-50'
-                }`}
-            >
-                {isUploading ? (
-                    <FontAwesomeIcon icon={faSpinner} className="w-3.5 h-3.5 animate-spin"/>
-                ) : (
-                    <FontAwesomeIcon icon={faArrowUp} className="w-3.5 h-3.5"/>
-                )}
-            </button>
+                tooltip={t('syncField.uploadTooltip')}
+            />
         </div>
     );
 }
diff --git a/components/form/TextInput.tsx b/components/form/TextInput.tsx
index f5e9e93..fe72c42 100644
--- a/components/form/TextInput.tsx
+++ b/components/form/TextInput.tsx
@@ -1,4 +1,12 @@
-import {ChangeEvent} from "react";
+import React, {ChangeEvent} from "react";
+
+type InputSize = 'sm' | 'md' | 'lg';
+
+const sizeClasses: Record<InputSize, string> = {
+    sm: 'px-3 py-1.5 text-xs rounded-lg',
+    md: 'px-4 py-2.5 text-sm rounded-xl',
+    lg: 'px-5 py-3 text-base rounded-xl',
+};
 
 interface TextInputProps {
     value: string;
@@ -7,6 +15,7 @@ interface TextInputProps {
     readOnly?: boolean;
     disabled?: boolean;
     onFocus?: () => void;
+    size?: InputSize;
 }
 
 export default function TextInput(
@@ -16,7 +25,8 @@ export default function TextInput(
         placeholder,
         readOnly = false,
         disabled = false,
-        onFocus
+        onFocus,
+        size = 'md'
     }: TextInputProps) {
     return (
         <input
@@ -27,13 +37,7 @@ export default function TextInput(
             disabled={disabled}
             placeholder={placeholder}
             onFocus={onFocus}
-            className={`w-full bg-secondary/50 text-text-primary px-4 py-2.5 rounded-xl border border-secondary/50
-                focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary
-                hover:bg-secondary hover:border-secondary
-                placeholder:text-muted/60
-                outline-none transition-all duration-200
-                ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
-                ${readOnly ? 'cursor-default' : ''}`}
+            className={`input-base ${sizeClasses[size]}`}
         />
     )
 }
diff --git a/components/form/TexteAreaInput.tsx b/components/form/TexteAreaInput.tsx
deleted file mode 100644
index b9d5b0b..0000000
--- a/components/form/TexteAreaInput.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import {ChangeEvent, useEffect, useState} from "react";
-
-interface TextAreaInputProps {
-    value: string;
-    setValue: (e: ChangeEvent<HTMLTextAreaElement>) => void;
-    placeholder: string;
-    maxLength?: number;
-}
-
-export default function TextAreaInput(
-    {
-        value,
-        setValue,
-        placeholder,
-        maxLength
-    }: TextAreaInputProps) {
-    const [prevLength, setPrevLength] = useState(value.length);
-    const [isGrowing, setIsGrowing] = useState(false);
-    
-    useEffect(() => {
-        if (value.length > prevLength) {
-            setIsGrowing(true);
-            setTimeout(() => setIsGrowing(false), 200);
-        }
-        setPrevLength(value.length);
-    }, [value.length, prevLength]);
-    
-    const getProgressPercentage = () => {
-        if (!maxLength) return 0;
-        return Math.min((value.length / maxLength) * 100, 100);
-    };
-    
-    const getStatusStyles = () => {
-        if (!maxLength) return {};
-        const percentage = getProgressPercentage();
-
-        if (percentage >= 100) return {
-            textColor: 'text-error',
-            bgColor: 'bg-error/10',
-            borderColor: 'border-error/30',
-            progressColor: 'bg-error'
-        };
-
-        if (percentage >= 90) return {
-            textColor: 'text-warning',
-            bgColor: 'bg-warning/10',
-            borderColor: 'border-warning/30',
-            progressColor: 'bg-warning'
-        };
-
-        if (percentage >= 75) return {
-            textColor: 'text-warning',
-            bgColor: 'bg-warning/10',
-            borderColor: 'border-warning/30',
-            progressColor: 'bg-warning'
-        };
-
-        return {
-            textColor: 'text-success',
-            bgColor: 'bg-success/10',
-            borderColor: 'border-success/30',
-            progressColor: 'bg-success'
-        };
-    };
-    
-    const styles = getStatusStyles();
-    
-    return (
-        <div className="flex-grow flex-col flex h-full">
-            <textarea
-                value={value}
-                onChange={setValue}
-                placeholder={placeholder}
-                rows={3}
-                className={`w-full flex-grow text-text-primary p-3 lg:p-4 rounded-xl border-2 outline-none resize-none transition-all duration-300 placeholder:text-muted/60 ${
-                    maxLength && value.length >= maxLength
-                        ? 'border-error focus:ring-4 focus:ring-error/20 bg-error/10 hover:bg-error/15'
-                        : 'bg-secondary/50 border-secondary/50 focus:ring-4 focus:ring-primary/20 focus:border-primary focus:bg-secondary hover:bg-secondary hover:border-secondary'
-                }`}
-                style={{height: '100%', minHeight: '200px'}}
-            />
-            
-            {maxLength && (
-                <div className="flex items-center justify-end gap-3 mt-3">
-                    {/* Compteur avec effet de croissance */}
-                    <div className={`flex items-center gap-3 px-4 py-2 rounded-lg border transition-all duration-300 ${
-                        isGrowing ? 'scale-110 shadow-lg' : 'scale-100'
-                    } ${styles.bgColor} ${styles.borderColor}`}>
-                        
-                        {/* Progress bar visible */}
-                        <div className="flex items-center gap-2">
-                            <span className="text-xs text-muted font-medium">Progression</span>
-                            <div className="w-20 h-2 bg-secondary/50 rounded-full overflow-hidden shadow-inner">
-                                <div
-                                    className={`h-full rounded-full transition-all duration-500 ease-out ${styles.progressColor} shadow-md`}
-                                    style={{width: `${getProgressPercentage()}%`}}
-                                ></div>
-                            </div>
-                        </div>
-                        
-                        {/* Compteur de caractères */}
-                        <div className="flex items-center gap-2">
-                            <div className={`text-sm font-semibold transition-all duration-200 ${
-                                isGrowing ? 'scale-125' : 'scale-100'
-                            } ${styles.textColor}`}>
-                                {value.length}
-                                <span className="text-muted mx-1">/</span>
-                                <span className="text-text-secondary">{maxLength}</span>
-                            </div>
-                            <span className="text-xs text-muted font-medium">caractères</span>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}
\ No newline at end of file
diff --git a/components/form/ToggleSwitch.tsx b/components/form/ToggleSwitch.tsx
index 82bf046..e7f2ecf 100644
--- a/components/form/ToggleSwitch.tsx
+++ b/components/form/ToggleSwitch.tsx
@@ -5,9 +5,16 @@ interface ToggleSwitchProps {
     checked: boolean;
     onChange: (checked: boolean) => void;
     disabled?: boolean;
+    size?: 'sm' | 'md';
 }
 
-export default function ToggleSwitch({checked, onChange, disabled = false}: ToggleSwitchProps) {
+export default function ToggleSwitch({checked, onChange, disabled = false, size = 'md'}: ToggleSwitchProps) {
+    const trackClass: string = size === 'sm' ? 'h-4 w-7' : 'h-6 w-11';
+    const thumbClass: string = size === 'sm' ? 'h-2.5 w-2.5' : 'h-4 w-4';
+    const translateClass: string = size === 'sm'
+        ? (checked ? 'translate-x-3.5' : 'translate-x-0.5')
+        : (checked ? 'translate-x-6' : 'translate-x-1');
+
     return (
         <button
             type="button"
@@ -15,14 +22,12 @@ export default function ToggleSwitch({checked, onChange, disabled = false}: Togg
             aria-checked={checked}
             disabled={disabled}
             onClick={(): void => onChange(!checked)}
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
+            className={`relative inline-flex ${trackClass} items-center rounded-full transition-colors duration-200 ${
                 checked ? 'bg-primary' : 'bg-secondary'
             } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
         >
             <span
-                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
-                    checked ? 'translate-x-6' : 'translate-x-1'
-                }`}
+                className={`inline-block ${thumbClass} transform rounded-full bg-text-primary transition-transform duration-200 ${translateClass}`}
             />
         </button>
     );
diff --git a/components/form/ToggleWithConfirmation.tsx b/components/form/ToggleWithConfirmation.tsx
index 5df0984..36ff756 100644
--- a/components/form/ToggleWithConfirmation.tsx
+++ b/components/form/ToggleWithConfirmation.tsx
@@ -1,7 +1,7 @@
 'use client'
 import React, {useState} from "react";
 import ToggleSwitch from "@/components/form/ToggleSwitch";
-import AlertBox, {AlertType} from "@/components/AlertBox";
+import AlertBox, {AlertType} from "@/components/ui/AlertBox";
 
 interface ToggleWithConfirmationProps {
     checked: boolean;
@@ -15,17 +15,17 @@ interface ToggleWithConfirmationProps {
 }
 
 export default function ToggleWithConfirmation({
-    checked,
-    onChange,
-    alertTitle,
-    alertMessage,
-    alertType,
-    confirmText = "Activer",
-    cancelText = "Annuler",
-    disabled = false
-}: ToggleWithConfirmationProps) {
+                                                   checked,
+                                                   onChange,
+                                                   alertTitle,
+                                                   alertMessage,
+                                                   alertType,
+                                                   confirmText = "Activer",
+                                                   cancelText = "Annuler",
+                                                   disabled = false
+                                               }: ToggleWithConfirmationProps) {
     const [showAlert, setShowAlert] = useState<boolean>(false);
-
+    
     function handleToggle(newChecked: boolean): void {
         if (newChecked) {
             setShowAlert(true);
@@ -33,20 +33,20 @@ export default function ToggleWithConfirmation({
             onChange(false);
         }
     }
-
+    
     async function handleConfirm(): Promise<void> {
         onChange(true);
         setShowAlert(false);
     }
-
+    
     function handleCancel(): void {
         setShowAlert(false);
     }
-
+    
     return (
         <>
             <ToggleSwitch checked={checked} onChange={handleToggle} disabled={disabled}/>
-
+            
             {showAlert && (
                 <AlertBox
                     title={alertTitle}
diff --git a/components/ghostwriter/GhostWriter.tsx b/components/ghostwriter/GhostWriter.tsx
index f1d43ae..3de32bf 100644
--- a/components/ghostwriter/GhostWriter.tsx
+++ b/components/ghostwriter/GhostWriter.tsx
@@ -1,442 +1,346 @@
-import {ChangeEvent, useContext, useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {
-    faBookOpen,
-    faFileImport,
-    faFloppyDisk,
-    faGear,
-    faGhost,
-    faHashtag,
-    faMagicWandSparkles,
-    faPalette,
-    faTags,
-    faX
-} from '@fortawesome/free-solid-svg-icons';
-import {SessionContext} from "@/context/SessionContext";
-import {AlertContext} from "@/context/AlertContext";
-import {EditorContext} from "@/context/EditorContext";
-import System from "@/lib/models/System";
-import {BookContext} from "@/context/BookContext";
-import {ChapterContext} from "@/context/ChapterContext";
-import QSTextGeneratedPreview from "@/components/QSTextGeneratedPreview";
-import TextInput from "@/components/form/TextInput";
-import InputField from "@/components/form/InputField";
-import RadioBox from "@/components/form/RadioBox";
-import TexteAreaInput from "@/components/form/TexteAreaInput";
-import SubmitButtonWLoading from "@/components/form/SubmitButtonWLoading";
-import NumberInput from "@/components/form/NumberInput";
-import PanelHeader from "@/components/PanelHeader";
-import GhostWriterTags from "@/components/ghostwriter/GhostWriterTags";
-import Chapter, {TiptapNode} from "@/lib/models/Chapter";
-import GhostWriterSettings from "@/components/ghostwriter/GhostWriterSettings";
-import {useTranslations} from "next-intl";
-import QuillSense, {AIGeneratedText} from "@/lib/models/QuillSense";
-import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
-import {LangContext} from "@/context/LangContext";
-import {configs} from "@/lib/configs";
-import AdvancedGenerationOptions from "@/components/form/AdvancedGenerationOptions";
-
-export default function GhostWriter() {
-    const t = useTranslations();
-    const {lang} = useContext(LangContext)
-    const {session} = useContext(SessionContext);
-    const {errorMessage, successMessage, infoMessage} = useContext(AlertContext);
-    const {editor} = useContext(EditorContext);
-    const {book} = useContext(BookContext);
-    const {chapter} = useContext(ChapterContext);
-    const {setTotalPrice, setTotalCredits} = useContext<AIUsageContextProps>(AIUsageContext);
-    
-    const [minWords, setMinWords] = useState<number>(500);
-    const [maxWords, setMaxWords] = useState<number>(1000);
-    const [toneAtmosphere, setToneAtmosphere] = useState<string>('');
-    const [directive, setDirective] = useState<string>('');
-    const [type, setType] = useState<number>(0);
-    const [isGenerating, setIsGenerating] = useState<boolean>(false);
-    const [textGenerated, setTextGenerated] = useState<string>('');
-    const [isTextGenerated, setIsTextGenerated] = useState<boolean>(false);
-    const [advanceSettings, setAdvanceSettings] = useState<boolean>(false);
-    const [advancedPrompt, setAdvancedPrompt] = useState<string>('');
-    const [showTags, setShowTags] = useState<boolean>(false);
-    const [taguedCharacters, setTaguedCharacters] = useState<string[]>([]);
-    const [taguedLocations, setTaguedLocations] = useState<string[]>([]);
-    const [taguedObjects, setTaguedObjects] = useState<string[]>([]);
-    const [taguedWorldElements, setTaguedWorldElements] = useState<string[]>([]);
-    const [abortController, setAbortController] = useState<ReadableStreamDefaultReader<Uint8Array> | null>(null);
-    
-    const [useExplicit, setUseExplicit] = useState<boolean>(false);
-    const [useSmart, setUseSmart] = useState<boolean>(false);
-    
-    const isGPTEnabled: boolean = QuillSense.isOpenAIEnabled(session);
-    const isSubTierTree: boolean = QuillSense.getSubLevel(session) === 3;
-    const hasAccess: boolean = isGPTEnabled || isSubTierTree;
-    
-    async function showAdvanceSetting(): Promise<void> {
-        if (advanceSettings) {
-            await handleSaveAdvancedSettings();
-            setAdvanceSettings(false);
-        } else {
-            setAdvanceSettings(true);
-        }
-    }
-    
-    async function handleSaveAdvancedSettings(): Promise<void> {
-        try {
-            if (advancedPrompt.trim() === '') {
-                errorMessage(t('ghostWriter.promptEmpty'));
-                return;
-            }
-            const response: boolean = await System.authPostToServer<boolean>(`quillsense/ghostwriter/advanced-settings`, {
-                bookId: book?.bookId,
-                advancedPrompt: advancedPrompt
-            }, session.accessToken, lang);
-            if (!response) {
-                errorMessage(t('ghostWriter.errorSaveAdvanced'));
-                return;
-            }
-            successMessage(t('ghostWriter.successSaveAdvanced'));
-            setAdvanceSettings(false);
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(t('ghostWriter.errorSave'));
-            } else {
-                errorMessage(t('ghostWriter.errorUnknown'));
-            }
-        }
-    }
-    
-    async function handleStopGeneration(): Promise<void> {
-        if (abortController) {
-            await abortController.cancel();
-            setAbortController(null);
-            infoMessage(t("ghostWriter.abortSuccess"));
-        }
-    }
-    
-    async function handleGenerateGhostWriter(): Promise<void> {
-        setIsGenerating(true);
-        setIsTextGenerated(false);
-        setTextGenerated('');
-        
-        try {
-            let content: string = '';
-            if (editor?.getText()) {
-                try {
-                    content = editor?.getText();
-                } catch (e: unknown) {
-                    if (e instanceof Error) {
-                        errorMessage(t('ghostWriter.errorRetrieveContent'));
-                    } else {
-                        errorMessage(t('ghostWriter.errorUnknownRetrieveContent'));
-                    }
-                }
-            }
-            
-            const response: Response = await fetch(`${configs.apiUrl}quillsense/ghostwriter/generate`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${session.accessToken}`,
-                },
-                body: JSON.stringify({
-                    bookId: book?.bookId,
-                    minWords: minWords,
-                    maxWords: maxWords,
-                    toneAtmosphere: toneAtmosphere,
-                    directive: directive,
-                    positionType: type,
-                    content: content,
-                    tags: {
-                        characters: taguedCharacters,
-                        locations: taguedLocations,
-                        objects: taguedObjects,
-                        worldElements: taguedWorldElements,
-                    },
-                    useExplicit: useExplicit,
-                    useSmart: useSmart,
-                }),
-            });
-            
-            if (!response.ok) {
-                const error: { message?: string } = await response.json();
-                errorMessage(error.message || t('ghostWriter.errorGenerate'));
-                setIsGenerating(false);
-                return;
-            }
-            
-            const reader: ReadableStreamDefaultReader<Uint8Array> | undefined = response.body?.getReader();
-            const decoder: TextDecoder = new TextDecoder();
-            let accumulatedText: string = '';
-            
-            if (!reader) {
-                errorMessage(t('ghostWriter.errorGenerate'));
-                setIsGenerating(false);
-                return;
-            }
-            
-            setAbortController(reader);
-            
-            while (true) {
-                try {
-                    const {done, value}: ReadableStreamReadResult<Uint8Array> = await reader.read();
-                    
-                    if (done) break;
-                    
-                    const chunk: string = decoder.decode(value, {stream: true});
-                    const lines: string[] = chunk.split('\n');
-                    
-                    for (const line of lines) {
-                        if (line.startsWith('data: ')) {
-                            try {
-                                const dataStr: string = line.slice(6);
-                                const data: {
-                                    content?: string;
-                                    totalCost?: number;
-                                    totalPrice?: number;
-                                    useYourKey?: boolean;
-                                } = JSON.parse(dataStr);
-                                if ('content' in data && data.content) {
-                                    accumulatedText += data.content;
-                                    setTextGenerated(accumulatedText);
-                                }
-                                else if ('useYourKey' in data && 'totalPrice' in data) {
-                                    if (data.useYourKey) {
-                                        setTotalPrice((prev: number): number => prev + data.totalPrice!);
-                                    } else {
-                                        setTotalCredits(data.totalPrice!);
-                                    }
-                                }
-                            } catch (e: unknown) {
-                                errorMessage(t('ghostWriter.errorProcessingData'));
-                            }
-                        }
-                    }
-                } catch (e: unknown) {
-                    break;
-                }
-            }
-            
-            setIsGenerating(false);
-            setIsTextGenerated(true);
-            setAbortController(null);
-        } catch (e: unknown) {
-            setIsGenerating(false);
-            setAbortController(null);
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t('ghostWriter.errorUnknown'));
-            }
-        }
-    }
-    
-    async function importPrompt(): Promise<void> {
-        try {
-            const response: TiptapNode = await System.authGetQueryToServer<TiptapNode>(
-                `chapter/content`,
-                session.accessToken,
-                lang,
-                {
-                    chapterid: chapter?.chapterId,
-                    version: 1
-                },
-            )
-            if (!response) {
-                errorMessage(t('ghostWriter.noContentFound'));
-                return;
-            }
-            const content: string = System.htmlToText(Chapter.convertTiptapToHTML(response));
-            setDirective(content);
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t('ghostWriter.errorUnknownImport'));
-            }
-        }
-    }
-    
-    function insertText(): void {
-        if (editor && textGenerated) {
-            editor.commands.focus('end');
-            if (editor.getText().length > 0) {
-                editor.commands.insertContent('\n\n');
-            }
-            editor.commands.insertContent(System.textContentToHtml(textGenerated));
-            setIsTextGenerated(false);
-        }
-    }
-    
-    if (!hasAccess || !book?.quillsenseEnabled) {
-        return (
-            <div className="flex items-center justify-center h-full">
-                <div
-                    className="bg-tertiary/90 backdrop-blur-sm p-10 rounded-2xl shadow-2xl text-center border border-secondary/50 max-w-md">
-                    <h2 className="text-2xl font-['ADLaM_Display'] text-text-primary mb-4">{t("ghostWriter.title")}</h2>
-                    <p className="text-muted mb-6 text-lg leading-relaxed">
-                        {!book?.quillsenseEnabled
-                            ? t("ghostWriter.quillsenseDisabled")
-                            : t("ghostWriter.subscriptionRequired")}
-                    </p>
-                    {hasAccess && !book?.quillsenseEnabled ? null : (
-                        <button
-                            onClick={(): string => window.location.href = '/pricing'}
-                            className="px-6 py-3 bg-primary text-text-primary rounded-xl hover:bg-primary-dark transition-all duration-200 hover:scale-105 shadow-md hover:shadow-lg font-semibold"
-                        >
-                            {t("ghostWriter.subscribe")}
-                        </button>
-                    )}
-                </div>
-            </div>
-        );
-    }
-    
-    return (
-        <div className="bg-secondary/20 backdrop-blur-sm flex flex-col h-full overflow-hidden">
-            <PanelHeader
-                title={t("ghostWriter.title")}
-                description={t("ghostWriter.description")}
-                badge="AI"
-                icon={faGhost}
-            />
-            
-            {
-                showTags ? (
-                    <GhostWriterTags taguedCharacters={taguedCharacters} setTaguedCharacters={setTaguedCharacters}
-                                     taguedLocations={taguedLocations} setTaguedLocations={setTaguedLocations}
-                                     taguedObjects={taguedObjects} setTaguedObjects={setTaguedObjects}
-                                     taguedWorldElements={taguedWorldElements}
-                                     setTaguedWorldElements={setTaguedWorldElements}/>
-                ) : !showTags && !advanceSettings ? (
-                    <div className="p-4 lg:p-5 space-y-5 overflow-y-auto flex-grow custom-scrollbar">
-                        <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
-                            <h3 className="text-text-primary text-lg font-medium mb-4 flex items-center gap-2">
-                                <FontAwesomeIcon icon={faHashtag} className="text-primary w-5 h-5"/>
-                                {t("ghostWriter.length")}
-                            </h3>
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <InputField
-                                    fieldName={t("ghostWriter.minimum")}
-                                    input={
-                                        <NumberInput
-                                            value={minWords}
-                                            setValue={setMinWords}
-                                            placeholder={t("ghostWriter.words")}
-                                        />
-                                    }
-                                />
-                                <InputField
-                                    fieldName={t("ghostWriter.maximum")}
-                                    input={
-                                        <NumberInput
-                                            value={maxWords}
-                                            setValue={setMaxWords}
-                                            placeholder={t("ghostWriter.words")}
-                                        />
-                                    }
-                                />
-                            </div>
-                        </div>
-                        
-                        <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
-                            <div className="mb-1">
-                                <InputField
-                                    icon={faBookOpen}
-                                    fieldName={t("ghostWriter.type")}
-                                    input={<RadioBox selected={type} setSelected={setType} name={'sectionType'}/>}
-                                />
-                            </div>
-                        </div>
-                        
-                        <div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
-                            <InputField
-                                icon={faPalette}
-                                fieldName={t("ghostWriter.toneAtmosphere")}
-                                input={
-                                    <TextInput
-                                        value={toneAtmosphere}
-                                        setValue={(e: ChangeEvent<HTMLInputElement>) => setToneAtmosphere(e.target.value)}
-                                        placeholder={t("ghostWriter.tonePlaceholder")}
-                                    />
-                                }
-                            />
-                        </div>
-                        
-                        <div className="bg-secondary/20 rounded-lg p-5 shadow-inner flex-1">
-                            <InputField
-                                icon={faMagicWandSparkles}
-                                fieldName={t("ghostWriter.directive")}
-                                action={importPrompt}
-                                actionIcon={faFileImport}
-                                actionLabel={t("ghostWriter.importPrompt")}
-                                input={
-                                    <TexteAreaInput
-                                        value={directive}
-                                        setValue={(e: ChangeEvent<HTMLTextAreaElement>) => setDirective(e.target.value)}
-                                        placeholder={t("ghostWriter.directivePlaceholder")}
-                                    />
-                                }
-                            />
-                        </div>
-                        
-                        <AdvancedGenerationOptions
-                            useExplicit={useExplicit}
-                            setUseExplicit={setUseExplicit}
-                            useSmart={useSmart}
-                            setUseSmart={setUseSmart}
-                        />
-                    </div>
-                ) : advanceSettings && (
-                    <GhostWriterSettings advancedPrompt={advancedPrompt} setAdvancedPrompt={setAdvancedPrompt}/>
-                )
-            }
-            
-            <div className="p-5 border-t border-secondary/50 bg-secondary/30 backdrop-blur-sm shrink-0 shadow-inner">
-                <div className="flex justify-center gap-6">
-                    <button
-                        onClick={showAdvanceSetting}
-                        className="px-6 py-3 rounded-xl font-medium text-base bg-secondary/50 hover:bg-secondary text-primary transition-all duration-200 flex items-center gap-2 shadow-md hover:shadow-lg hover:scale-105 border border-secondary/50"
-                    >
-                        <FontAwesomeIcon icon={advanceSettings ? faFloppyDisk : faGear} className={'w-5 h-5'}/>
-                        <span>{advanceSettings ? t("ghostWriter.save") : t("ghostWriter.advanced")}</span>
-                    </button>
-                    {
-                        advanceSettings && (
-                            <button
-                                onClick={(): void => setAdvanceSettings(false)}
-                                className="px-6 py-3 rounded-xl font-medium text-base bg-secondary/50 hover:bg-secondary text-error transition-all duration-200 flex items-center gap-2 shadow-md hover:shadow-lg hover:scale-105 border border-secondary/50"
-                            >
-                                <FontAwesomeIcon icon={faX} className={'w-5 h-5'}/>
-                                <span>{t("ghostWriter.cancel")}</span>
-                            </button>
-                        )
-                    }
-                    <button
-                        onClick={(): void => setShowTags(!showTags)}
-                        className="px-6 py-3 rounded-xl font-medium text-base bg-secondary/50 hover:bg-secondary text-primary transition-all duration-200 flex items-center gap-2 shadow-md hover:shadow-lg hover:scale-105 border border-secondary/50"
-                    >
-                        <FontAwesomeIcon icon={faTags} className={'w-5 h-5'}/>
-                        <span>{t("ghostWriter.tags.addTagPlaceholder")}</span>
-                    </button>
-                    
-                    <SubmitButtonWLoading
-                        callBackAction={handleGenerateGhostWriter}
-                        isLoading={isGenerating}
-                        text={t("ghostWriter.generate")}
-                        loadingText={t("ghostWriter.generating")}
-                        icon={faMagicWandSparkles}
-                    />
-                </div>
-            </div>
-            {(isTextGenerated || isGenerating) && (
-                <QSTextGeneratedPreview
-                    onClose={(): void => setIsTextGenerated(false)}
-                    onRefresh={(): Promise<void> => handleGenerateGhostWriter()}
-                    value={textGenerated}
-                    onInsert={insertText}
-                    isGenerating={isGenerating}
-                    onStop={handleStopGeneration}
-                />
-            )}
-        </div>
-    );
-}
\ No newline at end of file
+import React, {ChangeEvent, useContext, useState} from 'react';
+import {BookOpen, FileInput, Hash, Palette, Wand2} from 'lucide-react';
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {EditorContext, EditorContextProps} from "@/context/EditorContext";
+import {apiGet} from "@/lib/api/client";
+import {htmlToText, textContentToHtml} from "@/lib/utils/html";
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {ChapterContext, ChapterContextProps} from "@/context/ChapterContext";
+import QSTextGeneratedPreview from "@/components/ui/QSTextGeneratedPreview";
+import TextInput from "@/components/form/TextInput";
+import InputField from "@/components/form/InputField";
+import RadioBox from "@/components/form/RadioBox";
+import TextAreaInput from "@/components/form/TextAreaInput";
+import Button from "@/components/ui/Button";
+import NumberInput from "@/components/form/NumberInput";
+import SectionHeader from "@/components/ui/SectionHeader";
+import GhostWriterTags from "@/components/ghostwriter/GhostWriterTags";
+import {TiptapNode} from "@/lib/types/chapter";
+import {convertTiptapToHTML} from "@/lib/utils/tiptap";
+import {useTranslations} from '@/lib/i18n';
+import {getSubLevel, isOpenAIEnabled} from "@/lib/utils/quillsense";
+import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+import {configs} from "@/lib/configs";
+import AdvancedGenerationOptions from "@/components/form/AdvancedGenerationOptions";
+
+export default function GhostWriter() {
+    const t = useTranslations();
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage, infoMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {editor}: EditorContextProps = useContext<EditorContextProps>(EditorContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {chapter}: ChapterContextProps = useContext<ChapterContextProps>(ChapterContext);
+    const {setTotalPrice, setTotalCredits}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext);
+
+    const [minWords, setMinWords] = useState<number>(500);
+    const [maxWords, setMaxWords] = useState<number>(1000);
+    const [toneAtmosphere, setToneAtmosphere] = useState<string>('');
+    const [directive, setDirective] = useState<string>('');
+    const [type, setType] = useState<number>(0);
+    const [isGenerating, setIsGenerating] = useState<boolean>(false);
+    const [textGenerated, setTextGenerated] = useState<string>('');
+    const [isTextGenerated, setIsTextGenerated] = useState<boolean>(false);
+    const [taguedCharacters, setTaguedCharacters] = useState<string[]>([]);
+    const [taguedLocations, setTaguedLocations] = useState<string[]>([]);
+    const [taguedObjects, setTaguedObjects] = useState<string[]>([]);
+    const [taguedWorldElements, setTaguedWorldElements] = useState<string[]>([]);
+    const [abortController, setAbortController] = useState<ReadableStreamDefaultReader<Uint8Array> | null>(null);
+
+    const [useExplicit, setUseExplicit] = useState<boolean>(false);
+    const [useSmart, setUseSmart] = useState<boolean>(false);
+    
+    const isGPTEnabled: boolean = isOpenAIEnabled(session);
+    const isSubTierTree: boolean = getSubLevel(session) === 3;
+    const hasAccess: boolean = isGPTEnabled || isSubTierTree;
+
+    async function handleStopGeneration(): Promise<void> {
+        if (abortController) {
+            await abortController.cancel();
+            setAbortController(null);
+            infoMessage(t("ghostWriter.abortSuccess"));
+        }
+    }
+
+    async function handleGenerateGhostWriter(): Promise<void> {
+        setIsGenerating(true);
+        setIsTextGenerated(false);
+        setTextGenerated('');
+        
+        try {
+            let content: string = '';
+            if (editor?.getText()) {
+                try {
+                    content = editor?.getText();
+                } catch (e: unknown) {
+                    if (e instanceof Error) {
+                        errorMessage(t('ghostWriter.errorRetrieveContent'));
+                    } else {
+                        errorMessage(t('ghostWriter.errorUnknownRetrieveContent'));
+                    }
+                }
+            }
+            
+            const response: Response = await fetch(`${configs.apiUrl}quillsense/ghostwriter/generate`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${session.accessToken}`,
+                },
+                body: JSON.stringify({
+                    bookId: book?.bookId,
+                    minWords: minWords,
+                    maxWords: maxWords,
+                    toneAtmosphere: toneAtmosphere,
+                    directive: directive,
+                    positionType: type,
+                    content: content,
+                    tags: {
+                        characters: taguedCharacters,
+                        locations: taguedLocations,
+                        objects: taguedObjects,
+                        worldElements: taguedWorldElements,
+                    },
+                    useExplicit: useExplicit,
+                    useSmart: useSmart,
+                }),
+            });
+            
+            if (!response.ok) {
+                const error: { message?: string } = await response.json();
+                errorMessage(error.message || t('ghostWriter.errorGenerate'));
+                setIsGenerating(false);
+                return;
+            }
+            
+            const reader: ReadableStreamDefaultReader<Uint8Array> | undefined = response.body?.getReader();
+            const decoder: TextDecoder = new TextDecoder();
+            let accumulatedText: string = '';
+            
+            if (!reader) {
+                errorMessage(t('ghostWriter.errorGenerate'));
+                setIsGenerating(false);
+                return;
+            }
+            
+            setAbortController(reader);
+            
+            while (true) {
+                try {
+                    const {done, value}: ReadableStreamReadResult<Uint8Array> = await reader.read();
+
+                    if (done) break;
+
+                    const chunk: string = decoder.decode(value, {stream: true});
+                    const lines: string[] = chunk.split('\n');
+                    
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const dataStr: string = line.slice(6);
+                                const data: {
+                                    content?: string;
+                                    totalCost?: number;
+                                    totalPrice?: number;
+                                    useYourKey?: boolean;
+                                } = JSON.parse(dataStr);
+                                if ('content' in data && data.content) {
+                                    accumulatedText += data.content;
+                                    setTextGenerated(accumulatedText);
+                                }
+                                else if ('useYourKey' in data && 'totalPrice' in data) {
+                                    if (data.useYourKey) {
+                                        setTotalPrice((prev: number): number => prev + data.totalPrice!);
+                                    } else {
+                                        setTotalCredits(data.totalPrice!);
+                                    }
+                                }
+                            } catch (e: unknown) {
+                                errorMessage(t('ghostWriter.errorProcessingData'));
+                            }
+                        }
+                    }
+                } catch (e: unknown) {
+                    break;
+                }
+            }
+
+            setIsGenerating(false);
+            setIsTextGenerated(true);
+            setAbortController(null);
+        } catch (e: unknown) {
+            setIsGenerating(false);
+            setAbortController(null);
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t('ghostWriter.errorUnknown'));
+            }
+        }
+    }
+    
+    async function importPrompt(): Promise<void> {
+        try {
+            const response: TiptapNode = await apiGet<TiptapNode>(
+                `chapter/content`,
+                session.accessToken,
+                lang,
+                {
+                    chapterid: chapter?.chapterId,
+                    version: 1
+                },
+            )
+            if (!response) {
+                errorMessage(t('ghostWriter.noContentFound'));
+                return;
+            }
+            const content: string = htmlToText(convertTiptapToHTML(response));
+            setDirective(content);
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t('ghostWriter.errorUnknownImport'));
+            }
+        }
+    }
+    
+    function insertText(): void {
+        if (editor && textGenerated) {
+            editor.commands.focus('end');
+            if (editor.getText().length > 0) {
+                editor.commands.insertContent('\n\n');
+            }
+            editor.commands.insertContent(textContentToHtml(textGenerated));
+            setIsTextGenerated(false);
+        }
+    }
+    
+    if (!hasAccess) {
+        return (
+            <div className="flex items-center justify-center h-full">
+                <div className="bg-tertiary rounded-2xl p-10 text-center max-w-md">
+                    <h2 className="text-2xl font-['ADLaM_Display'] text-text-primary mb-4">{t("ghostWriter.title")}</h2>
+                    <p className="text-muted mb-6 text-lg leading-relaxed">{t("ghostWriter.subscriptionRequired")}</p>
+                    <Button
+                        variant="primary"
+                        size="lg"
+                        onClick={(): void => {
+                            window.location.href = '/pricing';
+                        }}
+                    >
+                        {t("ghostWriter.subscribe")}
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+    
+    return (
+        <div className="flex flex-col h-full overflow-hidden">
+            <SectionHeader
+                title={t("ghostWriter.title")}
+                description={t("ghostWriter.description")}
+                badge="AI"
+            />
+            
+            <div className="p-4 lg:p-5 space-y-6 overflow-y-auto flex-grow custom-scrollbar">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <InputField
+                        icon={Hash}
+                        fieldName={t("ghostWriter.minimum")}
+                        input={
+                            <NumberInput
+                                value={minWords}
+                                setValue={setMinWords}
+                                placeholder={t("ghostWriter.words")}
+                            />
+                        }
+                    />
+                    <InputField
+                        icon={Hash}
+                        fieldName={t("ghostWriter.maximum")}
+                        input={
+                            <NumberInput
+                                value={maxWords}
+                                setValue={setMaxWords}
+                                placeholder={t("ghostWriter.words")}
+                            />
+                        }
+                    />
+                </div>
+                
+                <InputField
+                    icon={BookOpen}
+                    fieldName={t("ghostWriter.type")}
+                    input={<RadioBox selected={type} setSelected={setType} name={'sectionType'}/>}
+                />
+                
+                <InputField
+                    icon={Palette}
+                    fieldName={t("ghostWriter.toneAtmosphere")}
+                    input={
+                        <TextInput
+                            value={toneAtmosphere}
+                            setValue={(e: ChangeEvent<HTMLInputElement>) => setToneAtmosphere(e.target.value)}
+                            placeholder={t("ghostWriter.tonePlaceholder")}
+                        />
+                    }
+                />
+                
+                <InputField
+                    icon={Wand2}
+                    fieldName={t("ghostWriter.directive")}
+                    action={importPrompt}
+                    actionIcon={FileInput}
+                    actionLabel={t("ghostWriter.importPrompt")}
+                    input={
+                        <TextAreaInput
+                            value={directive}
+                            setValue={(e: ChangeEvent<HTMLTextAreaElement>) => setDirective(e.target.value)}
+                            placeholder={t("ghostWriter.directivePlaceholder")}
+                        />
+                    }
+                />
+                
+                <GhostWriterTags
+                    taguedCharacters={taguedCharacters} setTaguedCharacters={setTaguedCharacters}
+                    taguedLocations={taguedLocations} setTaguedLocations={setTaguedLocations}
+                    taguedObjects={taguedObjects} setTaguedObjects={setTaguedObjects}
+                    taguedWorldElements={taguedWorldElements} setTaguedWorldElements={setTaguedWorldElements}
+                />
+                
+                <AdvancedGenerationOptions
+                    useExplicit={useExplicit}
+                    setUseExplicit={setUseExplicit}
+                    useSmart={useSmart}
+                    setUseSmart={setUseSmart}
+                />
+            </div>
+
+            <div className="p-5 shrink-0">
+                <div className="flex justify-center">
+                    <Button
+                        variant="primary"
+                        onClick={handleGenerateGhostWriter}
+                        isLoading={isGenerating}
+                        loadingText={t("ghostWriter.generating")}
+                        icon={Wand2}
+                    >{t("ghostWriter.generate")}</Button>
+                </div>
+            </div>
+            {(isTextGenerated || isGenerating) && (
+                <QSTextGeneratedPreview
+                    onClose={(): void => setIsTextGenerated(false)}
+                    onRefresh={(): Promise<void> => handleGenerateGhostWriter()}
+                    value={textGenerated}
+                    onInsert={insertText}
+                    isGenerating={isGenerating}
+                    onStop={handleStopGeneration}
+                />
+            )}
+        </div>
+    );
+}
diff --git a/components/ghostwriter/GhostWriterSettings.tsx b/components/ghostwriter/GhostWriterSettings.tsx
index 6c78b34..caa6cb3 100644
--- a/components/ghostwriter/GhostWriterSettings.tsx
+++ b/components/ghostwriter/GhostWriterSettings.tsx
@@ -1,13 +1,13 @@
 import InputField from "@/components/form/InputField";
-import TexteAreaInput from "@/components/form/TexteAreaInput";
+import TextAreaInput from "@/components/form/TextAreaInput";
 import {ChangeEvent, Dispatch, SetStateAction, useContext, useEffect} from "react";
-import {faGuilded} from "@fortawesome/free-brands-svg-icons";
+import {Wand2} from "lucide-react";
 import {AlertContext} from "@/context/AlertContext";
-import System from "@/lib/models/System";
+import {apiGet} from "@/lib/api/client";
 import {SessionContext} from "@/context/SessionContext";
 import {BookContext} from "@/context/BookContext";
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import {useTranslations} from "next-intl";
+import {useTranslations} from "@/lib/i18n";
 
 interface GhostWriterSettingsProps {
     advancedPrompt: string;
@@ -24,14 +24,14 @@ export default function GhostWriterSettings(
     const t = useTranslations();
     const {lang} = useContext<LangContextProps>(LangContext)
     const {book} = useContext(BookContext);
-    
+
     useEffect((): void => {
         getAdvancedSettings().catch();
     }, []);
-    
+
     async function getAdvancedSettings(): Promise<void> {
         try {
-            const setting: string = await System.authGetQueryToServer<string>(`quillsense/ghostwriter/advanced-settings`, session.accessToken, lang, {
+            const setting: string = await apiGet<string>(`quillsense/ghostwriter/advanced-settings`, session.accessToken, lang, {
                 bookId: book?.bookId
             });
             if (setting) {
@@ -45,14 +45,14 @@ export default function GhostWriterSettings(
             }
         }
     }
-    
+
     return (
         <div className={`p-4 lg:p-5 space-y-5 overflow-y-auto flex-grow custom-scrollbar`}>
-            <InputField input={<TexteAreaInput value={advancedPrompt}
-                                               setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setAdvancedPrompt(e.target.value)}
-                                               placeholder={`Information complémentaire pour la génération...`}
-                                               maxLength={600}/>}
-                        fieldName={`Prompt additionnel`} icon={faGuilded}/>
+            <InputField input={<TextAreaInput value={advancedPrompt}
+                                             setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setAdvancedPrompt(e.target.value)}
+                                             placeholder={`Information complémentaire pour la génération...`}
+                                             maxLength={600}/>}
+                        fieldName={`Prompt additionnel`} icon={Wand2}/>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/components/ghostwriter/GhostWriterTags.tsx b/components/ghostwriter/GhostWriterTags.tsx
index 3f5a2de..4219607 100644
--- a/components/ghostwriter/GhostWriterTags.tsx
+++ b/components/ghostwriter/GhostWriterTags.tsx
@@ -1,14 +1,14 @@
-import {ChangeEvent, Dispatch, SetStateAction, useContext, useEffect, useState} from "react";
-import {SelectBoxProps} from "@/shared/interface";
-import {faCubes, faGlobe, faMapPin, faUser} from "@fortawesome/free-solid-svg-icons";
-import System from "@/lib/models/System";
-import {SessionContext} from "@/context/SessionContext";
-import {AlertContext} from "@/context/AlertContext";
-import {BookContext} from "@/context/BookContext";
-import {BookTags} from "@/lib/models/Book";
+import React, {ChangeEvent, Dispatch, SetStateAction, useContext, useEffect, useState} from "react";
+import {SelectBoxProps} from "@/components/form/SelectBox";
+import {Boxes, Globe, MapPin, User} from "lucide-react";
+import {apiGet} from "@/lib/api/client";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {BookTags} from "@/lib/types/book";
 import SuggestFieldInput from "@/components/form/SuggestFieldInput";
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import {useTranslations} from "next-intl";
+import {useTranslations} from '@/lib/i18n';
 
 interface GhostWriterTagsProps {
     taguedCharacters: string[];
@@ -32,34 +32,34 @@ export default function GhostWriterTags(
         taguedWorldElements,
         setTaguedWorldElements
     }: GhostWriterTagsProps) {
-    const {session} = useContext(SessionContext);
-    const {errorMessage} = useContext(AlertContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext)
-    const {book} = useContext(BookContext);
-    
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+
     const [characters, setCharacters] = useState<SelectBoxProps[]>([]);
     const [locations, setLocations] = useState<SelectBoxProps[]>([]);
     const [objects, setObjects] = useState<SelectBoxProps[]>([]);
     const [worldElements, setWorldElements] = useState<SelectBoxProps[]>([]);
-    
+
     const [searchCharacters, setSearchCharacters] = useState<string>('');
     const [searchLocations, setSearchLocations] = useState<string>('');
     const [searchObjects, setSearchObjects] = useState<string>('');
     const [searchWorldElements, setSearchWorldElements] = useState<string>('');
-    
+
     const [showCharacterSuggestions, setShowCharacterSuggestions] = useState<boolean>(false);
     const [showLocationSuggestions, setShowLocationSuggestions] = useState<boolean>(false);
     const [showObjectSuggestions, setShowObjectSuggestions] = useState<boolean>(false);
     const [showWorldElementSuggestions, setShowWorldElementSuggestions] = useState<boolean>(false);
-    
+
     useEffect((): void => {
         fetchData().then();
     }, []);
-    
+
     async function fetchData(): Promise<void> {
         try {
-            const tagsResponse: BookTags = await System.authGetQueryToServer<BookTags>(`book/tags`, session.accessToken, lang, {bookId: book?.bookId});
+            const tagsResponse: BookTags = await apiGet<BookTags>(`book/tags`, session.accessToken, lang, {bookId: book?.bookId});
             if (tagsResponse) {
                 setCharacters(tagsResponse.characters);
                 setLocations(tagsResponse.locations);
@@ -74,7 +74,7 @@ export default function GhostWriterTags(
             }
         }
     }
-    
+
     function filteredCharacters(): SelectBoxProps[] {
         if (searchCharacters.trim().length === 0) return [];
         return characters
@@ -84,7 +84,7 @@ export default function GhostWriterTags(
             )
             .slice(0, 3);
     }
-    
+
     function filteredLocations(): SelectBoxProps[] {
         if (searchLocations.trim().length === 0) return [];
         return locations
@@ -94,7 +94,7 @@ export default function GhostWriterTags(
             )
             .slice(0, 3);
     }
-    
+
     function filteredObjects(): SelectBoxProps[] {
         if (searchObjects.trim().length === 0) return [];
         return objects
@@ -104,7 +104,7 @@ export default function GhostWriterTags(
             )
             .slice(0, 3);
     }
-    
+
     function filteredWorldElements(): SelectBoxProps[] {
         if (searchWorldElements.trim().length === 0) return [];
         return worldElements
@@ -114,20 +114,18 @@ export default function GhostWriterTags(
             )
             .slice(0, 3);
     }
-    
+
     function handleAddCharacter(value: string): void {
         if (!taguedCharacters.includes(value)) {
-            const newCharacters: string[] = [...taguedCharacters, value];
-            setTaguedCharacters(newCharacters);
+            setTaguedCharacters([...taguedCharacters, value]);
         }
         setSearchCharacters('');
         setShowCharacterSuggestions(false);
     }
-    
+
     function handleAddLocation(value: string): void {
         if (!taguedLocations.includes(value)) {
-            const newLocations: string[] = [...taguedLocations, value];
-            setTaguedLocations(newLocations);
+            setTaguedLocations([...taguedLocations, value]);
         }
         setSearchLocations('');
         setShowLocationSuggestions(false);
@@ -135,8 +133,7 @@ export default function GhostWriterTags(
     
     function handleAddObject(value: string): void {
         if (!taguedObjects.includes(value)) {
-            const newObjects: string[] = [...taguedObjects, value];
-            setTaguedObjects(newObjects);
+            setTaguedObjects([...taguedObjects, value]);
         }
         setSearchObjects('');
         setShowObjectSuggestions(false);
@@ -144,8 +141,7 @@ export default function GhostWriterTags(
     
     function handleAddWorldElement(value: string): void {
         if (!taguedWorldElements.includes(value)) {
-            const newWorldElements: string[] = [...taguedWorldElements, value];
-            setTaguedWorldElements(newWorldElements);
+            setTaguedWorldElements([...taguedWorldElements, value]);
         }
         setSearchWorldElements('');
         setShowWorldElementSuggestions(false);
@@ -208,9 +204,9 @@ export default function GhostWriterTags(
     }
     
     return (
-        <div className="p-4 lg:p-5 space-y-4 overflow-y-auto flex-grow custom-scrollbar">
+        <div className="space-y-4">
             <SuggestFieldInput inputFieldName={`Personnages`}
-                               inputFieldIcon={faUser}
+                               inputFieldIcon={User}
                                searchTags={searchCharacters}
                                tagued={taguedCharacters}
                                handleTagSearch={(e: ChangeEvent<HTMLInputElement>): void => handleCharacterSearch(e.target.value)}
@@ -223,10 +219,10 @@ export default function GhostWriterTags(
             />
             
             <SuggestFieldInput inputFieldName={`Lieux`}
-                               inputFieldIcon={faMapPin}
+                               inputFieldIcon={MapPin}
                                searchTags={searchLocations}
                                tagued={taguedLocations}
-                               handleTagSearch={(e) => handleLocationSearch(e.target.value)}
+                               handleTagSearch={(e: ChangeEvent<HTMLInputElement>): void => handleLocationSearch(e.target.value)}
                                handleAddTag={handleAddLocation}
                                handleRemoveTag={handleRemoveLocation}
                                filteredTags={filteredLocations}
@@ -236,10 +232,10 @@ export default function GhostWriterTags(
             />
             
             <SuggestFieldInput inputFieldName={`Objets`}
-                               inputFieldIcon={faCubes}
+                               inputFieldIcon={Boxes}
                                searchTags={searchObjects}
                                tagued={taguedObjects}
-                               handleTagSearch={(e) => handleObjectSearch(e.target.value)}
+                               handleTagSearch={(e: ChangeEvent<HTMLInputElement>): void => handleObjectSearch(e.target.value)}
                                handleAddTag={handleAddObject}
                                handleRemoveTag={handleRemoveObject}
                                filteredTags={filteredObjects}
@@ -249,10 +245,10 @@ export default function GhostWriterTags(
             />
             
             <SuggestFieldInput inputFieldName={`Éléments mondiaux`}
-                               inputFieldIcon={faGlobe}
+                               inputFieldIcon={Globe}
                                searchTags={searchWorldElements}
                                tagued={taguedWorldElements}
-                               handleTagSearch={(e) => handleWorldElementSearch(e.target.value)}
+                               handleTagSearch={(e: ChangeEvent<HTMLInputElement>): void => handleWorldElementSearch(e.target.value)}
                                handleAddTag={handleAddWorldElement}
                                handleRemoveTag={handleRemoveWorldElement}
                                filteredTags={filteredWorldElements}
@@ -262,4 +258,4 @@ export default function GhostWriterTags(
             />
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/components/input/BackButton.tsx b/components/input/BackButton.tsx
deleted file mode 100644
index 315eedd..0000000
--- a/components/input/BackButton.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-
-export default function BackButton(
-    {
-        text,
-        callBackFunction
-    }:{
-        text:string,
-        callBackFunction: Function;
-    }){
-
-    function callBackButton(){
-        callBackFunction();
-    }
-
-    return (
-        <div className="text-center mt-4">
-            <button
-                onClick={callBackButton}
-                className="text-muted hover:text-primary hover:scale-105 transition-all duration-200 font-medium px-3 py-1.5 rounded-lg hover:bg-primary/10"
-            >
-                {
-                    text
-                }
-            </button>
-        </div>
-    )
-}
diff --git a/components/input/SelectOptionField.tsx b/components/input/SelectOptionField.tsx
deleted file mode 100644
index 2ee9973..0000000
--- a/components/input/SelectOptionField.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import {Dispatch, SetStateAction} from "react";
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-
-interface SelectOption {
-    label: string,
-    value: string,
-}
-
-interface SelectOptionFieldProps {
-    label: string,
-    options: SelectOption[],
-    setOptionValue: Dispatch<SetStateAction<string>>,
-    isRequired?: boolean,
-    isDisabled?: boolean,
-    icon?: IconDefinition,
-}
-
-export default function SelectOptionField(
-    {
-        label,
-        options,
-        setOptionValue,
-        isRequired = false,
-        isDisabled = false,
-        icon
-    }: SelectOptionFieldProps
-) {
-    return (
-        <div
-            className={'flex justify-start items-center gap-2 px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none w-full hover:bg-secondary hover:border-secondary focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20 focus-within:bg-secondary transition-all duration-200'}>
-            {
-                icon && <FontAwesomeIcon icon={icon} className={'text-primary w-4 h-4'}/>
-            }
-            <select onChange={(e) => setOptionValue(e.target.value)}
-                    className={'w-full bg-transparent text-text-primary border-none outline-none font-medium disabled:opacity-50 disabled:cursor-not-allowed'}
-                    required={isRequired}
-                    disabled={isDisabled}>
-                <option value={''} defaultChecked={true} hidden={true}
-                        className="bg-tertiary">{label}{isRequired ? ' *' : ''}</option>
-                {options.map((option: SelectOption) => (
-                    <option key={option.value} value={option.value}
-                            className="bg-tertiary text-text-primary">{option.label}</option>
-                ))}
-            </select>
-        </div>
-    )
-}
diff --git a/components/input/TextInputField.tsx b/components/input/TextInputField.tsx
deleted file mode 100644
index d53ddf1..0000000
--- a/components/input/TextInputField.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {Dispatch, SetStateAction, useState} from "react";
-
-export default function TextInputField(
-    {
-        label,
-        inputValue,
-        inputType,
-        setInputValue,
-        inputId,
-        isRequired = false,
-        hintMessage,
-        isDisabled = false,
-        icon
-    }:{
-        label: string,
-        inputValue: string,
-        inputType: "text" | "password" | "email" | "url" | "date" | "number",
-        setInputValue: Dispatch<SetStateAction<string>>,
-        inputId: string,
-        isRequired?: boolean,
-        hintMessage?: string,
-        isDisabled?: boolean,
-        icon?: IconDefinition,
-    }
-){
-
-    const [hintShown, setHintShown] = useState<boolean>(false);
-
-    function showHint(){
-        if (hintMessage){
-            setHintShown(true);
-        }
-    }
-    function hideHint(){
-        if (hintShown){
-            setHintShown(false);
-        }
-    }
-
-    return (
-        <div className="w-full">
-            <div
-                className={'flex justify-start items-center gap-2 px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none w-full hover:bg-secondary hover:border-secondary focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20 focus-within:bg-secondary transition-all duration-200'}>
-                {
-                    icon && <FontAwesomeIcon icon={icon} className={'text-primary w-4 h-4'}/>
-                }
-                <input
-                    type={inputType}
-                    id={inputId}
-                    value={inputValue}
-                    onChange={(e) => setInputValue(e.target.value)}
-                    required={isRequired}
-                    placeholder={`${label}${isRequired ? ' *' : ''}`}
-                    onFocus={showHint}
-                    onBlur={hideHint}
-                    className={'w-full bg-transparent text-text-primary border-none outline-none placeholder:text-muted/60 disabled:opacity-50 disabled:cursor-not-allowed'}
-                    disabled={isDisabled}
-                />
-            </div>
-            {
-                hintShown && hintMessage &&
-                <small className="text-muted text-xs mt-1 ml-1 block">{hintMessage}</small>
-            }
-        </div>
-    )
-}
diff --git a/components/leftbar/ScribeChapterComponent.tsx b/components/leftbar/ScribeChapterComponent.tsx
index e4965e4..82fdcc3 100644
--- a/components/leftbar/ScribeChapterComponent.tsx
+++ b/components/leftbar/ScribeChapterComponent.tsx
@@ -1,34 +1,32 @@
-import {ChapterListProps, ChapterProps} from "@/lib/models/Chapter";
-import {RefObject, useContext, useEffect, useRef, useState} from "react";
-import System from "@/lib/models/System";
-import {BookContext} from "@/context/BookContext";
-import {AlertContext} from "@/context/AlertContext";
-import {ChapterContext} from "@/context/ChapterContext";
-import {SessionContext} from "@/context/SessionContext";
-import {faSheetPlastic} from "@fortawesome/free-solid-svg-icons";
-import ListItem from "@/components/ListItem";
-import AlertBox from "@/components/AlertBox";
-import {useTranslations} from "next-intl";
-import InlineAddInput from "@/components/form/InlineAddInput";
-import {LangContext} from "@/context/LangContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
+import {ChapterListProps} from "@/lib/types/chapter";
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {apiDelete, apiGet, apiPost} from '@/lib/api/client';
+import {isDesktop} from '@/lib/configs';
 import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {ChapterContext, ChapterContextProps} from "@/context/ChapterContext";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {useRouter} from "@/lib/navigation";
+import {FileText} from "lucide-react";
+import ListItem from "@/components/ui/ListItem";
+import AlertBox from "@/components/ui/AlertBox";
+import {useTranslations} from '@/lib/i18n';
+import InlineAddInput from "@/components/form/InlineAddInput";
+import {LangContext, LangContextProps} from "@/context/LangContext";
 
 export default function ScribeChapterComponent() {
     const t = useTranslations();
-    const {lang} = useContext(LangContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-
-    const {book} = useContext(BookContext);
-    const {chapter, setChapter} = useContext(ChapterContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {session} = useContext(SessionContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {chapter}: ChapterContextProps = useContext<ChapterContextProps>(ChapterContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
     const userToken: string = session?.accessToken ? session?.accessToken : '';
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
+    const router = useRouter();
     
     const [chapters, setChapters] = useState<ChapterListProps[]>([])
     
@@ -38,12 +36,13 @@ export default function ScribeChapterComponent() {
     const [deleteConfirmationMessage, setDeleteConfirmationMessage] = useState<boolean>(false);
     const [removeChapterId, setRemoveChapterId] = useState<string>('');
     
-    const chapterRefs: RefObject<Map<string, HTMLDivElement>> = useRef<Map<string, HTMLDivElement>>(new Map());
-    const scrollContainerRef: RefObject<HTMLUListElement | null> = useRef<HTMLUListElement>(null);
+    const chapterRefs: React.RefObject<Map<string, HTMLDivElement>> = useRef<Map<string, HTMLDivElement>>(new Map());
+    const scrollContainerRef: React.RefObject<HTMLUListElement | null> = useRef<HTMLUListElement>(null);
     
     useEffect((): void => {
-        if (book)
-        getChapterList().then();
+        if (book) {
+            getChapterList().then();
+        }
     }, [book]);
     
     useEffect((): void => {
@@ -52,16 +51,16 @@ export default function ScribeChapterComponent() {
     
     useEffect((): void => {
         if (chapter?.chapterId && scrollContainerRef.current) {
-            setTimeout(():void => {
+            setTimeout((): void => {
                 const element: HTMLDivElement | undefined = chapterRefs.current.get(chapter.chapterId);
                 const container: HTMLUListElement | null = scrollContainerRef.current;
                 
                 if (element && container) {
-                    const containerRect:DOMRect = container.getBoundingClientRect();
-                    const elementRect:DOMRect = element.getBoundingClientRect();
+                    const containerRect: DOMRect = container.getBoundingClientRect();
+                    const elementRect: DOMRect = element.getBoundingClientRect();
                     
-                    const relativeTop:number = elementRect.top - containerRect.top + container.scrollTop;
-                    const scrollPosition:number = relativeTop - (containerRect.height / 2) + (elementRect.height / 2);
+                    const relativeTop: number = elementRect.top - containerRect.top + container.scrollTop;
+                    const scrollPosition: number = relativeTop - (containerRect.height / 2) + (elementRect.height / 2);
                     
                     container.scrollTo({
                         top: Math.max(0, scrollPosition),
@@ -79,11 +78,11 @@ export default function ScribeChapterComponent() {
     
     async function getChapterList(): Promise<void> {
         try {
-            let response: ChapterListProps[]|null;
-            if (isCurrentlyOffline() || book?.localBook){
+            let response: ChapterListProps[];
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
                 response = await tauri.getChapters(book?.bookId ?? '') as ChapterListProps[];
             } else {
-                response = await System.authGetQueryToServer<ChapterListProps[]>(`book/chapters?id=${book?.bookId}`, userToken, lang);
+                response = await apiGet<ChapterListProps[]>(`book/chapters?id=${book?.bookId}`, userToken, lang);
             }
             if (response) {
                 setChapters(response);
@@ -97,49 +96,22 @@ export default function ScribeChapterComponent() {
         }
     }
     
-    async function getChapter(chapterId: string): Promise<void> {
-        const version: number = chapter?.chapterContent.version ? chapter?.chapterContent.version : 2;
-        try {
-            let response: ChapterProps | null
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getWholeChapter(chapterId, version, book?.bookId ?? '');
-            } else {
-                response = await System.authGetQueryToServer<ChapterProps>(`chapter/whole`, userToken, lang, {
-                    bookid: book?.bookId,
-                    id: chapterId,
-                    version: version,
-                });
-            }
-            if (!response) {
-                errorMessage(t("scribeChapterComponent.errorFetchChapter"));
-                return;
-            }
-            setChapter(response);
-        } catch (e: unknown) {
-            if (e instanceof Error) {
-                errorMessage(e.message);
-            } else {
-                errorMessage(t("scribeChapterComponent.errorFetchChapter"));
-            }
-        }
+    function navigateToChapter(chapterId: string): void {
+        router.push(`/book/${book?.bookId}/chapter/${chapterId}`);
     }
+
     
     async function handleChapterUpdate(chapterId: string, title: string, chapterOrder: number): Promise<void> {
         try {
             let response: boolean;
-            const updateData = {
-                chapterId: chapterId,
-                chapterOrder: chapterOrder,
-                title: title,
-            };
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.updateChapter(updateData.chapterId, updateData.title, updateData.chapterOrder);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.updateChapter(chapterId, title, chapterOrder);
             } else {
-                response = await System.authPostToServer<boolean>('chapter/update', updateData, userToken, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === book?.bookId)) {
-                    addToQueue('update_chapter', {data: updateData});
-                }
+                response = await apiPost<boolean>('chapter/update', {
+                    chapterId: chapterId,
+                    chapterOrder: chapterOrder,
+                    title: title,
+                }, userToken, lang);
             }
             if (!response) {
                 errorMessage(t("scribeChapterComponent.errorChapterUpdate"));
@@ -172,20 +144,13 @@ export default function ScribeChapterComponent() {
     async function handleDeleteChapter(): Promise<void> {
         try {
             setDeleteConfirmationMessage(false);
-            let response:boolean = false;
-            const deletedAt: number = System.timeStampInSeconds();
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.removeChapter(removeChapterId, book?.bookId ?? '', deletedAt);
+            let response: boolean;
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.removeChapter(removeChapterId, book?.bookId ?? '', Date.now());
             } else {
-                response = await System.authDeleteToServer<boolean>('chapter/remove', {
+                response = await apiDelete<boolean>('chapter/remove', {
                     chapterId: removeChapterId,
-                    bookId: book?.bookId,
-                    deletedAt,
                 }, userToken, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === book?.bookId)) {
-                    addToQueue('remove_chapter', {data: {chapterId: removeChapterId, bookId: book?.bookId, deletedAt}});
-                }
             }
             if (!response) {
                 errorMessage(t("scribeChapterComponent.errorChapterDelete"));
@@ -209,26 +174,21 @@ export default function ScribeChapterComponent() {
             errorMessage(t("scribeChapterComponent.errorChapterNameRequired"));
             return;
         }
-        const chapterTitle: string = chapterOrder >= 0 ? newChapterName : book?.title as string;
+        const chapterTitle: string = chapterOrder >= 0 ? newChapterName : (book?.title ?? '');
         try {
-            let chapterId:string|null = null;
-            const addData = {
-                bookId: book?.bookId,
-                chapterOrder: chapterOrder,
-                title: chapterTitle
-            };
-            if (isCurrentlyOffline() || book?.localBook){
+            let chapterId: string;
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
                 chapterId = await tauri.addChapter({
-                    bookId: addData.bookId ?? '',
-                    title: addData.title,
-                    chapterOrder: addData.chapterOrder,
+                    bookId: book?.bookId ?? '',
+                    title: chapterTitle,
+                    chapterOrder: chapterOrder,
                 });
             } else {
-                chapterId = await System.authPostToServer<string>('chapter/add', addData, userToken, lang);
-
-                if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === book?.bookId)) {
-                    addToQueue('add_chapter', {data: {...addData, chapterId}});
-                }
+                chapterId = await apiPost<string>('chapter/add', {
+                    bookId: book?.bookId,
+                    chapterOrder: chapterOrder,
+                    title: chapterTitle
+                }, userToken, lang);
             }
             if (!chapterId) {
                 errorMessage(t("scribeChapterComponent.errorChapterSubmit", {chapterName: newChapterName}));
@@ -242,7 +202,7 @@ export default function ScribeChapterComponent() {
             setChapters((prevState: ChapterListProps[]): ChapterListProps[] => {
                 return [newChapter, ...prevState]
             })
-            await getChapter(chapterId);
+            navigateToChapter(chapterId);
         } catch (e: unknown) {
             if (e instanceof Error) {
                 errorMessage(e.message);
@@ -255,10 +215,7 @@ export default function ScribeChapterComponent() {
     return (
         <div className="flex-1 flex flex-col p-4 min-h-0">
             <div className="mb-4">
-                <div className="flex items-center gap-2 mb-3">
-                    <div className="h-6 w-1 bg-primary rounded-full"></div>
-                    <h3 className="text-lg font-bold text-primary tracking-wide">{t("scribeChapterComponent.sheetHeading")}</h3>
-                </div>
+                <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-3">{t("scribeChapterComponent.sheetHeading")}</h3>
                 <ul className="space-y-2">
                     {
                         chapters.filter((chap: ChapterListProps): boolean => {
@@ -268,17 +225,17 @@ export default function ScribeChapterComponent() {
                                 const aOrder: number = a.chapterOrder ?? 0;
                                 const bOrder: number = b.chapterOrder ?? 0;
                                 return aOrder - bOrder;
-                            }).map((chap: ChapterListProps) => (
+                            }).map((chap: ChapterListProps): React.JSX.Element => (
                             <div key={chap.chapterId}
-                                 ref={(el): void => {
+                                 ref={(el: HTMLDivElement | null): void => {
                                      if (el) {
                                          chapterRefs.current.set(chap.chapterId, el);
                                      } else {
                                          chapterRefs.current.delete(chap.chapterId);
                                      }
                                  }}>
-                                <ListItem icon={faSheetPlastic}
-                                          onClick={(): Promise<void> => getChapter(chap.chapterId)}
+                                <ListItem icon={FileText}
+                                          onClick={(): void => navigateToChapter(chap.chapterId)}
                                           selectedId={chapter?.chapterId ?? ''}
                                           id={chap.chapterId}
                                           text={chap.title}/>
@@ -290,7 +247,7 @@ export default function ScribeChapterComponent() {
                             return chap.chapterOrder !== undefined && chap.chapterOrder < 0;
                         }).length === 0 &&
                         <li onClick={(): Promise<void> => handleAddChapter(-1)}
-                            className="group p-3 bg-secondary/30 rounded-xl hover:bg-secondary cursor-pointer transition-all hover:shadow-md border border-secondary/30 hover:border-primary/30">
+                            className="group p-3 rounded-xl hover:bg-tertiary cursor-pointer transition-colors duration-150">
                             <span
                                 className="text-sm font-medium text-muted group-hover:text-text-primary transition-colors">
                                 {t("scribeChapterComponent.createSheet")}
@@ -301,10 +258,7 @@ export default function ScribeChapterComponent() {
             </div>
             
             <div className="flex-1 flex flex-col mt-6 min-h-0">
-                <div className="flex items-center gap-2 mb-3">
-                    <div className="h-6 w-1 bg-primary rounded-full"></div>
-                    <h3 className="text-lg font-bold text-primary tracking-wide">{t("scribeChapterComponent.chaptersHeading")}</h3>
-                </div>
+                <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-3">{t("scribeChapterComponent.chaptersHeading")}</h3>
                 <ul ref={scrollContainerRef} className="flex-1 space-y-2 overflow-y-auto pr-2 min-h-0">
                     {
                         chapters.filter((chap: ChapterListProps): boolean => {
@@ -314,22 +268,32 @@ export default function ScribeChapterComponent() {
                                 const aOrder: number = a.chapterOrder ?? 0;
                                 const bOrder: number = b.chapterOrder ?? 0;
                                 return aOrder - bOrder;
-                            }).map((chap: ChapterListProps) => (
+                            }).map((chap: ChapterListProps): React.JSX.Element => (
                             <div key={chap.chapterId}
-                                 ref={(el): void => {
+                                 ref={(el: HTMLDivElement | null): void => {
                                      if (el) {
                                          chapterRefs.current.set(chap.chapterId, el);
                                      } else {
                                          chapterRefs.current.delete(chap.chapterId);
                                      }
                                  }}>
-                                <ListItem onClick={(): Promise<void> => getChapter(chap.chapterId)}
+                                <ListItem onClick={(): void => navigateToChapter(chap.chapterId)}
                                           isEditable={true}
                                           handleUpdate={handleChapterUpdate}
                                           handleDelete={handleDeleteConfirmation}
                                           selectedId={chapter?.chapterId ?? ''}
                                           id={chap.chapterId} text={chap.title}
-                                          numericalIdentifier={chap.chapterOrder}/>
+                                          numericalIdentifier={chap.chapterOrder}
+                                          onReorder={(chapterId: string, newOrder: number): void => {
+                                              setChapters((previousChapters: ChapterListProps[]): ChapterListProps[] =>
+                                                  previousChapters.map((chapter: ChapterListProps): ChapterListProps =>
+                                                      chapter.chapterId === chapterId ? {
+                                                          ...chapter,
+                                                          chapterOrder: newOrder
+                                                      } : chapter
+                                                  )
+                                              );
+                                          }}/>
                             </div>
                         ))
                     }
diff --git a/components/leftbar/ScribeLeftBar.tsx b/components/leftbar/ScribeLeftBar.tsx
index 46a2789..9c1fe4d 100644
--- a/components/leftbar/ScribeLeftBar.tsx
+++ b/components/leftbar/ScribeLeftBar.tsx
@@ -1,85 +1,68 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faBookMedical, faBookOpen, faFeather, faFileImport, faLayerGroup} from "@fortawesome/free-solid-svg-icons";
+import {BookHeart, BookOpen, Feather, FileInput, Layers, X} from "lucide-react";
 import React, {useContext, useEffect, useState} from "react";
-import {BookContext} from "@/context/BookContext";
+import {BookContext, BookContextProps} from "@/context/BookContext";
 import ScribeChapterComponent from "@/components/leftbar/ScribeChapterComponent";
-import PanelHeader from "@/components/PanelHeader";
-import {PanelComponent} from "@/lib/models/Editor";
+import SectionHeader from "@/components/ui/SectionHeader";
+import IconButton from "@/components/ui/IconButton";
+import {PanelComponent} from "@/lib/types/editor";
 import AddNewBookForm from "@/components/book/AddNewBookForm";
 import AddNewSeriesForm from "@/components/series/AddNewSeriesForm";
 import ShortStoryGenerator from "@/components/ShortStoryGenerator";
 import ImportBookForm from "@/components/book/ImportBookForm";
-import {SessionContext} from "@/context/SessionContext";
-import {useTranslations} from "next-intl";
-import OfflineContext from "@/context/OfflineContext";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {useTranslations} from '@/lib/i18n';
+import InsetPanel from "@/components/ui/InsetPanel";
 
 export default function ScribeLeftBar() {
-    const {book} = useContext(BookContext);
-    const {session} = useContext(SessionContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
     const t = useTranslations();
-    
+
     const [panelHidden, setPanelHidden] = useState<boolean>(false);
-    
     const [currentPanel, setCurrentPanel] = useState<PanelComponent>();
-    
     const [showAddNewBook, setShowAddNewBook] = useState<boolean>(false);
     const [showAddNewSeries, setShowAddNewSeries] = useState<boolean>(false);
     const [showGenerateShortModal, setShowGenerateShortModal] = useState<boolean>(false)
     const [showImportBook, setShowImportBook] = useState<boolean>(false)
-    const {isCurrentlyOffline} = useContext(OfflineContext)
-    
+
     const editorComponents: PanelComponent[] = [
         {
             id: 1,
             title: t("scribeLeftBar.editorComponents.structure.title"),
             description: t("scribeLeftBar.editorComponents.structure.description"),
             badge: t("scribeLeftBar.editorComponents.structure.badge"),
-            icon: faBookOpen
+            icon: BookOpen
         }
-        /*
-        {
-            id: 2,
-            title: 'Ligne directive',
-            icon: faBookmark,
-            badge: 'LD',
-            description: 'Ligne directrice pour ce chapitre.'
-        }, {
-            id: 3,
-            title: 'Statistique',
-            icon: faChartLine,
-            badge: 'STATS',
-            description: 'Vérification des verbes'
-        }*/
     ]
-    
+
     const homeComponents: PanelComponent[] = [
         {
             id: 1,
             title: t("scribeLeftBar.homeComponents.addBook.title"),
             description: t("scribeLeftBar.homeComponents.addBook.description"),
             badge: t("scribeLeftBar.homeComponents.addBook.badge"),
-            icon: faBookMedical
+            icon: BookHeart
         }, {
             id: 2,
             title: t("scribeLeftBar.homeComponents.generateStory.title"),
-            icon: faFeather,
+            icon: Feather,
             badge: t("scribeLeftBar.homeComponents.generateStory.badge"),
             description: t("scribeLeftBar.homeComponents.generateStory.description")
         }, {
             id: 3,
             title: t("scribeLeftBar.homeComponents.addSeries.title"),
-            icon: faLayerGroup,
+            icon: Layers,
             badge: t("scribeLeftBar.homeComponents.addSeries.badge"),
             description: t("scribeLeftBar.homeComponents.addSeries.description")
         }, {
             id: 4,
             title: t("scribeLeftBar.homeComponents.importBook.title"),
-            icon: faFileImport,
+            icon: FileInput,
             badge: t("scribeLeftBar.homeComponents.importBook.badge"),
             description: t("scribeLeftBar.homeComponents.importBook.description")
         },
     ]
-    
+
     function togglePanel(component: PanelComponent): void {
         if (panelHidden) {
             if (currentPanel?.id === component.id) {
@@ -91,71 +74,65 @@ export default function ScribeLeftBar() {
         }
     }
     
-    useEffect(():void => {
-        if (!book){
+    useEffect((): void => {
+        if (!book) {
             setCurrentPanel(undefined);
             setPanelHidden(false);
             return;
         }
     }, [book]);
     
+
     return (
         <div id="left-panel-container" data-guide={"left-panel-container"} className="flex transition-all duration-300">
-            <div className="bg-tertiary border-r border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
+            <div className="bg-tertiary p-1 flex flex-col space-y-2">
                 {book ? editorComponents.map(component => (
-                    <button
+                    <IconButton
                         key={component.id}
+                        icon={component.icon}
+                        variant="ghost"
+                        shape="square"
+                        tooltip={component.title}
+                        selected={panelHidden && currentPanel?.id === component.id}
                         onClick={(): void => {
                             togglePanel(component);
                             setCurrentPanel(component);
                         }}
-                        title={component.title}
-                        className={`group relative p-3 rounded-xl transition-all duration-200 ${panelHidden && currentPanel?.id === component.id
-                            ? 'bg-primary text-text-primary shadow-lg shadow-primary/30'
-                            : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md'}`}
-                    >
-                        <FontAwesomeIcon icon={component.icon}
-                                         className={'w-4 h-4 transition-transform duration-200'}/>
-                        {panelHidden && currentPanel?.id === component.id && (
-                            <div
-                                className="absolute -right-1 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-l-full"></div>
-                        )}
-                    </button>
+                    />
                 )) : (
-                    homeComponents
-                        .filter((component: PanelComponent): boolean => {
-                            // Hide generate story (id: 2) and import book (id: 4) in offline mode (requires server)
-                            // Series (id: 3) now has dual logic and works offline
-                            if (isCurrentlyOffline() && (component.id === 2 || component.id === 4)) {
-                                return false;
-                            }
-                            return true;
-                        })
-                        .map((component: PanelComponent) => (
-                            <button
-                                key={component.id}
-                                onClick={() => component.id === 1 ? setShowAddNewBook(true) : component.id === 2 ? setShowGenerateShortModal(true) : component.id === 3 ? setShowAddNewSeries(true) : component.id === 4 ? setShowImportBook(true) : null}
-                                title={component.title}
-                                className={`group relative p-3 rounded-xl transition-all duration-200 ${panelHidden && currentPanel?.id === component.id
-                                    ? 'bg-primary text-text-primary shadow-lg shadow-primary/30'
-                                    : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md'}`}
-                            >
-                                <FontAwesomeIcon icon={component.icon}
-                                                 className={'w-4 h-4 transition-transform duration-200'}/>
-                            </button>
-                        ))
+                    homeComponents.map((component: PanelComponent) => (
+                        <IconButton
+                            key={component.id}
+                            icon={component.icon}
+                            variant="ghost"
+                            shape="square"
+                            tooltip={component.title}
+                            selected={panelHidden && currentPanel?.id === component.id}
+                            onClick={(): void => {
+                                if (component.id === 1) setShowAddNewBook(true);
+                                else if (component.id === 2) setShowGenerateShortModal(true);
+                                else if (component.id === 3) setShowAddNewSeries(true);
+                                else if (component.id === 4) setShowImportBook(true);
+                            }}
+                        />
+                    ))
                 )}
             </div>
 
             {panelHidden && (
                 <div id="left-panel"
-                     className="bg-tertiary/95 backdrop-blur-sm border-r border-secondary/50 h-full min-w-[320px] transition-all duration-300 overflow-y-auto shadow-2xl flex flex-col">
-                    <PanelHeader title={currentPanel?.title ?? ''} description={``} badge={``}
-                                 icon={currentPanel?.icon}
-                                 callBackAction={async () => setPanelHidden(!panelHidden)}/>
-                    {currentPanel?.id === 1 && (
-                        <ScribeChapterComponent/>
-                    )}
+                     className="bg-tertiary h-full min-w-[320px] transition-all duration-300 flex flex-col">
+                    <InsetPanel>
+                        <div className="p-4">
+                            <SectionHeader title={currentPanel?.title ?? ''}
+                                           icon={currentPanel?.icon}
+                                           actions={<IconButton icon={X} variant="ghost"
+                                                                onClick={async (): Promise<void> => setPanelHidden(!panelHidden)}/>}/>
+                        </div>
+                        {currentPanel?.id === 1 && (
+                            <ScribeChapterComponent/>
+                        )}
+                    </InsetPanel>
                 </div>
             )}
             {
@@ -176,4 +153,4 @@ export default function ScribeLeftBar() {
             }
         </div>
     )
-}
\ No newline at end of file
+}
diff --git a/components/offline/OfflinePinSetup.tsx b/components/offline/OfflinePinSetup.tsx
index 9adff30..a85baeb 100644
--- a/components/offline/OfflinePinSetup.tsx
+++ b/components/offline/OfflinePinSetup.tsx
@@ -1,176 +1,166 @@
-'use client';
-
-import { useState, useContext } from 'react';
-import { SessionContext } from '@/context/SessionContext';
-import { useTranslations } from 'next-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLock, faShieldAlt, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
-import * as tauri from '@/lib/tauri';
-
-interface OfflinePinSetupProps {
-  onClose?: () => void;
-  onSuccess?: () => void;
-  showOnFirstLogin?: boolean;
-}
-
-export default function OfflinePinSetup({ onClose, onSuccess, showOnFirstLogin }: OfflinePinSetupProps) {
-  const t = useTranslations();
-  const { session } = useContext(SessionContext);
-  const [pin, setPin] = useState('');
-  const [confirmPin, setConfirmPin] = useState('');
-  const [showPin, setShowPin] = useState(false);
-  const [error, setError] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-
-  // Only allow PIN setup if authenticated
-  if (!session?.isConnected || !session?.user) {
-    return null;
-  }
-
-  const validatePin = (): boolean => {
-    if (pin.length < 4) {
-      setError(t('offline.pin.errors.tooShort'));
-      return false;
-    }
-    if (pin.length > 8) {
-      setError(t('offline.pin.errors.tooLong'));
-      return false;
-    }
-    if (!/^\d+$/.test(pin)) {
-      setError(t('offline.pin.errors.digitsOnly'));
-      return false;
-    }
-    if (pin !== confirmPin) {
-      setError(t('offline.pin.errors.mismatch'));
-      return false;
-    }
-    return true;
-  };
-
-  const handleSetPin = async () => {
-    if (!validatePin()) return;
-
-    setIsLoading(true);
-    setError('');
-
-    try {
-      const result = await tauri.offlinePinSet(pin);
-
-      if (result.success) {
-        await tauri.offlineModeSet(true, 30);
-        onSuccess?.();
-      } else {
-        setError(result.error || t('offline.pin.errors.setupFailed'));
-      }
-    } catch (error) {
-      console.error('[OfflinePin] Error setting PIN:', error);
-      setError(t('offline.pin.errors.setupFailed'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div className="bg-tertiary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
-        {/* Header */}
-        <div className="flex items-center gap-3 mb-4">
-          <div className="p-3 bg-primary/10 rounded-lg">
-            <FontAwesomeIcon icon={faShieldAlt} className="w-6 h-6 text-primary" />
-          </div>
-          <div className="flex-1">
-            <h2 className="text-xl font-bold text-textPrimary">
-              {showOnFirstLogin ? t('offline.pin.setup.titleFirstLogin') : t('offline.pin.setup.title')}
-            </h2>
-            <p className="text-sm text-muted">
-              {t('offline.pin.setup.subtitle')}
-            </p>
-          </div>
-        </div>
-
-        {/* Info box */}
-        <div className="bg-info/10 border border-info/20 rounded-lg p-3 mb-4">
-          <p className="text-sm text-info">
-            <FontAwesomeIcon icon={faLock} className="w-3 h-3 mr-2" />
-            {t('offline.pin.setup.description')}
-          </p>
-        </div>
-
-        {/* PIN Input */}
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-textPrimary mb-2">
-              {t('offline.pin.setup.pinLabel')}
-            </label>
-            <div className="relative">
-              <input
-                type={showPin ? 'text' : 'password'}
-                value={pin}
-                onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
-                placeholder="••••"
-                maxLength={8}
-                className="w-full px-4 py-2 bg-secondary border border-gray-dark rounded-lg focus:outline-none focus:border-primary"
-                disabled={isLoading}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPin(!showPin)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-textPrimary"
-              >
-                <FontAwesomeIcon icon={showPin ? faEyeSlash : faEye} className="w-4 h-4" />
-              </button>
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-textPrimary mb-2">
-              {t('offline.pin.setup.confirmPinLabel')}
-            </label>
-            <input
-              type={showPin ? 'text' : 'password'}
-              value={confirmPin}
-              onChange={(e) => setConfirmPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
-              placeholder="••••"
-              maxLength={8}
-              className="w-full px-4 py-2 bg-secondary border border-gray-dark rounded-lg focus:outline-none focus:border-primary"
-              disabled={isLoading}
-            />
-          </div>
-        </div>
-
-        {/* Error message */}
-        {error && (
-          <div className="mt-3 p-2 bg-danger/10 border border-danger/20 rounded-lg">
-            <p className="text-sm text-danger">{error}</p>
-          </div>
-        )}
-
-        {/* Actions */}
-        <div className="mt-6 flex gap-3 justify-end">
-          {onClose && (
-            <button
-              onClick={onClose}
-              className="px-4 py-2 text-muted hover:text-textPrimary transition-colors"
-              disabled={isLoading}
-            >
-              {t('offline.pin.setup.laterButton')}
-            </button>
-          )}
-          <button
-            onClick={handleSetPin}
-            disabled={isLoading || !pin || !confirmPin}
-            className="px-6 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-          >
-            <FontAwesomeIcon icon={faLock} className="w-4 h-4" />
-            {isLoading ? t('offline.pin.setup.configuringButton') : t('offline.pin.setup.configureButton')}
-          </button>
-        </div>
-
-        {/* Footer note */}
-        <p className="mt-4 text-xs text-muted text-center">
-          {t('offline.pin.setup.footer')}
-        </p>
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
+'use client';
+
+import {useState, useContext} from 'react';
+import {SessionContext} from '@/context/SessionContext';
+import {useTranslations} from '@/lib/i18n';
+import {Lock, ShieldCheck, Eye, EyeOff} from 'lucide-react';
+import * as tauri from '@/lib/tauri';
+import Button from '@/components/ui/Button';
+
+interface OfflinePinSetupProps {
+    onClose?: () => void;
+    onSuccess?: () => void;
+    showOnFirstLogin?: boolean;
+}
+
+export default function OfflinePinSetup({onClose, onSuccess, showOnFirstLogin}: OfflinePinSetupProps) {
+    const t = useTranslations();
+    const {session} = useContext(SessionContext);
+    const [pin, setPin] = useState('');
+    const [confirmPin, setConfirmPin] = useState('');
+    const [showPin, setShowPin] = useState(false);
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+
+    if (!session?.isConnected || !session?.user) {
+        return null;
+    }
+
+    const validatePin = (): boolean => {
+        if (pin.length < 4) {
+            setError(t('offline.pin.errors.tooShort'));
+            return false;
+        }
+        if (pin.length > 8) {
+            setError(t('offline.pin.errors.tooLong'));
+            return false;
+        }
+        if (!/^\d+$/.test(pin)) {
+            setError(t('offline.pin.errors.digitsOnly'));
+            return false;
+        }
+        if (pin !== confirmPin) {
+            setError(t('offline.pin.errors.mismatch'));
+            return false;
+        }
+        return true;
+    };
+
+    const handleSetPin = async () => {
+        if (!validatePin()) return;
+
+        setIsLoading(true);
+        setError('');
+
+        try {
+            const result = await tauri.offlinePinSet(pin);
+
+            if (result.success) {
+                await tauri.offlineModeSet(true, 30);
+                onSuccess?.();
+            } else {
+                setError(result.error || t('offline.pin.errors.setupFailed'));
+            }
+        } catch (error) {
+            setError(t('offline.pin.errors.setupFailed'));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-darkest-background/60 backdrop-blur-md">
+            <div className="bg-tertiary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
+                <div className="flex items-center gap-3 mb-4">
+                    <div className="p-3 bg-primary/10 rounded-lg">
+                        <ShieldCheck className="w-6 h-6 text-primary"/>
+                    </div>
+                    <div className="flex-1">
+                        <h2 className="text-xl font-bold text-text-primary">
+                            {showOnFirstLogin ? t('offline.pin.setup.titleFirstLogin') : t('offline.pin.setup.title')}
+                        </h2>
+                        <p className="text-sm text-muted">
+                            {t('offline.pin.setup.subtitle')}
+                        </p>
+                    </div>
+                </div>
+
+                <div className="bg-info/10 border border-info/20 rounded-lg p-3 mb-4">
+                    <p className="text-sm text-info flex items-center gap-2">
+                        <Lock className="w-3 h-3"/>
+                        {t('offline.pin.setup.description')}
+                    </p>
+                </div>
+
+                <div className="space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium text-text-primary mb-2">
+                            {t('offline.pin.setup.pinLabel')}
+                        </label>
+                        <div className="relative">
+                            <input
+                                type={showPin ? 'text' : 'password'}
+                                value={pin}
+                                onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
+                                placeholder="••••"
+                                maxLength={8}
+                                className="input-base text-center text-lg tracking-widest"
+                                disabled={isLoading}
+                            />
+                            <button
+                                type="button"
+                                onClick={() => setShowPin(!showPin)}
+                                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-text-primary transition-colors"
+                            >
+                                {showPin ? <EyeOff className="w-4 h-4"/> : <Eye className="w-4 h-4"/>}
+                            </button>
+                        </div>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-text-primary mb-2">
+                            {t('offline.pin.setup.confirmPinLabel')}
+                        </label>
+                        <input
+                            type={showPin ? 'text' : 'password'}
+                            value={confirmPin}
+                            onChange={(e) => setConfirmPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
+                            placeholder="••••"
+                            maxLength={8}
+                            className="input-base text-center text-lg tracking-widest"
+                            disabled={isLoading}
+                        />
+                    </div>
+                </div>
+
+                {error && (
+                    <div className="mt-3 p-2 bg-error/10 border border-error/20 rounded-lg">
+                        <p className="text-sm text-error">{error}</p>
+                    </div>
+                )}
+
+                <div className="mt-6 flex gap-3 justify-end">
+                    {onClose && (
+                        <Button variant="ghost" onClick={onClose} disabled={isLoading}>
+                            {t('offline.pin.setup.laterButton')}
+                        </Button>
+                    )}
+                    <Button
+                        variant="primary"
+                        icon={Lock}
+                        isLoading={isLoading}
+                        loadingText={t('offline.pin.setup.configuringButton')}
+                        onClick={handleSetPin}
+                        disabled={isLoading || !pin || !confirmPin}
+                    >
+                        {t('offline.pin.setup.configureButton')}
+                    </Button>
+                </div>
+
+                <p className="mt-4 text-xs text-muted text-center">
+                    {t('offline.pin.setup.footer')}
+                </p>
+            </div>
+        </div>
+    );
+}
diff --git a/components/offline/OfflinePinVerify.tsx b/components/offline/OfflinePinVerify.tsx
index 6860cf7..4333573 100644
--- a/components/offline/OfflinePinVerify.tsx
+++ b/components/offline/OfflinePinVerify.tsx
@@ -1,170 +1,149 @@
-'use client';
-
-import { useState } from 'react';
-import { useTranslations } from 'next-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLock, faWifi, faEye, faEyeSlash, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
-import System from '@/lib/models/System';
-import * as tauri from '@/lib/tauri';
-
-interface OfflinePinVerifyProps {
-  onSuccess: (userId: string) => void;
-  onCancel?: () => void;
-}
-
-export default function OfflinePinVerify({ onSuccess, onCancel }: OfflinePinVerifyProps) {
-  const t = useTranslations();
-  const [pin, setPin] = useState('');
-  const [showPin, setShowPin] = useState(false);
-  const [error, setError] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [attempts, setAttempts] = useState(0);
-
-  const handleVerifyPin = async () => {
-    if (!pin || pin.length < 4) {
-      setError(t('offline.pin.verify.enterPin'));
-      return;
-    }
-
-    setIsLoading(true);
-    setError('');
-
-    try {
-      const result = await tauri.offlinePinVerify(pin);
-
-      if (result.success && result.userId) {
-        onSuccess(result.userId);
-      } else {
-        setAttempts(prev => prev + 1);
-        setPin('');
-
-        if (attempts >= 2) {
-          setError(t('offline.pin.verify.tooManyAttempts'));
-        } else {
-          setError(result.error || t('offline.pin.verify.incorrect'));
-        }
-      }
-    } catch (error) {
-      setError(t('offline.pin.verify.error'));
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      handleVerifyPin();
-    }
-  };
-
-  const handleLogout = async () => {
-    System.removeCookie("token");
-    await tauri.removeToken();
-    tauri.logout();
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background">
-      <div className="bg-tertiary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
-        {/* Header */}
-        <div className="flex items-center justify-center mb-6">
-          <div className="relative">
-            <div className="p-4 bg-primary/10 rounded-full">
-              <FontAwesomeIcon icon={faLock} className="w-8 h-8 text-primary" />
-            </div>
-            <div className="absolute -bottom-1 -right-1 p-1 bg-tertiary rounded-full">
-              <div className="p-1 bg-warning/20 rounded-full">
-                <FontAwesomeIcon icon={faWifi} className="w-3 h-3 text-warning" />
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="text-center mb-6">
-          <h2 className="text-xl font-bold text-textPrimary mb-2">
-            {t('offline.pin.verify.title')}
-          </h2>
-          <p className="text-sm text-muted">
-            {t('offline.pin.verify.subtitle')}
-          </p>
-        </div>
-
-        {/* PIN Input */}
-        <div className="mb-4">
-          <div className="relative">
-            <input
-              type={showPin ? 'text' : 'password'}
-              value={pin}
-              onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
-              onKeyPress={handleKeyPress}
-              placeholder={t('offline.pin.verify.placeholder')}
-              maxLength={8}
-              autoFocus
-              className="w-full px-4 py-3 bg-secondary border border-gray-dark rounded-lg focus:outline-none focus:border-primary text-center text-lg tracking-widest"
-              disabled={isLoading || attempts > 2}
-            />
-            <button
-              type="button"
-              onClick={() => setShowPin(!showPin)}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-textPrimary"
-            >
-              <FontAwesomeIcon icon={showPin ? faEyeSlash : faEye} className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-
-        {/* Error message */}
-        {error && (
-          <div className="mb-4 p-3 bg-danger/10 border border-danger/20 rounded-lg">
-            <p className="text-sm text-danger text-center">{error}</p>
-          </div>
-        )}
-
-        {/* Actions */}
-        <div className="flex gap-3">
-          <button
-            onClick={handleLogout}
-            className="flex-1 px-4 py-2 text-error hover:bg-error/10 rounded-lg transition-all flex items-center justify-center gap-2"
-            disabled={isLoading}
-          >
-            <FontAwesomeIcon icon={faSignOutAlt} className="w-4 h-4" />
-            <span className="text-sm font-medium">{t('userMenu.logout')}</span>
-          </button>
-          {onCancel && (
-            <button
-              onClick={onCancel}
-              className="flex-1 px-4 py-2 border border-gray-dark text-muted hover:text-textPrimary hover:border-gray rounded-lg transition-colors"
-              disabled={isLoading}
-            >
-              {t('offline.pin.verify.cancelButton')}
-            </button>
-          )}
-          <button
-            onClick={handleVerifyPin}
-            disabled={isLoading || !pin || attempts > 2}
-            className="flex-1 px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-          >
-            {isLoading ? (
-              <>
-                <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                {t('offline.pin.verify.verifyingButton')}
-              </>
-            ) : (
-              <>
-                <FontAwesomeIcon icon={faLock} className="w-4 h-4" />
-                {t('offline.pin.verify.unlockButton')}
-              </>
-            )}
-          </button>
-        </div>
-
-        {/* Help text */}
-        {attempts > 0 && attempts <= 2 && (
-          <p className="mt-4 text-xs text-muted text-center">
-            {t('offline.pin.verify.attemptsRemaining', { count: 3 - attempts })}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
+'use client';
+
+import {useState} from 'react';
+import {useTranslations} from '@/lib/i18n';
+import {Lock, Wifi, Eye, EyeOff, LogOut} from 'lucide-react';
+import {removeCookie} from '@/lib/utils/cookies';
+import * as tauri from '@/lib/tauri';
+import Button from '@/components/ui/Button';
+
+interface OfflinePinVerifyProps {
+    onSuccess: (userId: string) => void;
+    onCancel?: () => void;
+}
+
+export default function OfflinePinVerify({onSuccess, onCancel}: OfflinePinVerifyProps) {
+    const t = useTranslations();
+    const [pin, setPin] = useState('');
+    const [showPin, setShowPin] = useState(false);
+    const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [attempts, setAttempts] = useState(0);
+
+    const handleVerifyPin = async () => {
+        if (!pin || pin.length < 4) {
+            setError(t('offline.pin.verify.enterPin'));
+            return;
+        }
+
+        setIsLoading(true);
+        setError('');
+
+        try {
+            const result = await tauri.offlinePinVerify(pin);
+
+            if (result.success && result.userId) {
+                onSuccess(result.userId);
+            } else {
+                setAttempts(prev => prev + 1);
+                setPin('');
+
+                if (attempts >= 2) {
+                    setError(t('offline.pin.verify.tooManyAttempts'));
+                } else {
+                    setError(result.error || t('offline.pin.verify.incorrect'));
+                }
+            }
+        } catch (error) {
+            setError(t('offline.pin.verify.error'));
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            handleVerifyPin();
+        }
+    };
+
+    const handleLogout = async () => {
+        removeCookie("token");
+        await tauri.removeToken();
+        tauri.logout();
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background">
+            <div className="bg-tertiary rounded-2xl p-6 max-w-md w-full mx-4 shadow-2xl">
+                <div className="flex items-center justify-center mb-6">
+                    <div className="relative">
+                        <div className="p-4 bg-primary/10 rounded-full">
+                            <Lock className="w-8 h-8 text-primary"/>
+                        </div>
+                        <div className="absolute -bottom-1 -right-1 p-1 bg-tertiary rounded-full">
+                            <div className="p-1 bg-warning/20 rounded-full">
+                                <Wifi className="w-3 h-3 text-warning"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="text-center mb-6">
+                    <h2 className="text-xl font-bold text-text-primary mb-2">
+                        {t('offline.pin.verify.title')}
+                    </h2>
+                    <p className="text-sm text-muted">
+                        {t('offline.pin.verify.subtitle')}
+                    </p>
+                </div>
+
+                <div className="mb-4">
+                    <div className="relative">
+                        <input
+                            type={showPin ? 'text' : 'password'}
+                            value={pin}
+                            onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 8))}
+                            onKeyPress={handleKeyPress}
+                            placeholder={t('offline.pin.verify.placeholder')}
+                            maxLength={8}
+                            autoFocus
+                            className="input-base text-center text-lg tracking-widest"
+                            disabled={isLoading || attempts > 2}
+                        />
+                        <button
+                            type="button"
+                            onClick={() => setShowPin(!showPin)}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-text-primary transition-colors"
+                        >
+                            {showPin ? <EyeOff className="w-4 h-4"/> : <Eye className="w-4 h-4"/>}
+                        </button>
+                    </div>
+                </div>
+
+                {error && (
+                    <div className="mb-4 p-3 bg-error/10 border border-error/20 rounded-lg">
+                        <p className="text-sm text-error text-center">{error}</p>
+                    </div>
+                )}
+
+                <div className="flex gap-3">
+                    <Button variant="danger" icon={LogOut} onClick={handleLogout} disabled={isLoading}>
+                        {t('userMenu.logout')}
+                    </Button>
+                    {onCancel && (
+                        <Button variant="secondary" onClick={onCancel} disabled={isLoading}>
+                            {t('offline.pin.verify.cancelButton')}
+                        </Button>
+                    )}
+                    <Button
+                        variant="primary"
+                        icon={Lock}
+                        isLoading={isLoading}
+                        loadingText={t('offline.pin.verify.verifyingButton')}
+                        onClick={handleVerifyPin}
+                        disabled={isLoading || !pin || attempts > 2}
+                    >
+                        {t('offline.pin.verify.unlockButton')}
+                    </Button>
+                </div>
+
+                {attempts > 0 && attempts <= 2 && (
+                    <p className="mt-4 text-xs text-muted text-center">
+                        {t('offline.pin.verify.attemptsRemaining', {count: 3 - attempts})}
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/components/offline/OfflineToggle.tsx b/components/offline/OfflineToggle.tsx
index 4e57fd6..1220cd3 100644
--- a/components/offline/OfflineToggle.tsx
+++ b/components/offline/OfflineToggle.tsx
@@ -1,40 +1,39 @@
-'use client';
-
-import { useContext } from 'react';
-import OfflineContext from '@/context/OfflineContext';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faWifi, faCircle } from '@fortawesome/free-solid-svg-icons';
-
-export default function OfflineToggle() {
-    const { offlineMode, toggleOfflineMode } = useContext(OfflineContext);
-
-    if (!offlineMode.isDatabaseInitialized) {
-        return null;
-    }
-
-    const handleToggle = () => {
-        toggleOfflineMode();
-    };
-
-    return (
-        <button
-            onClick={handleToggle}
-            className={`
-                flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all
-                ${offlineMode.isOffline
-                    ? 'bg-orange-500/20 border-orange-500/40 hover:bg-orange-500/30'
-                    : 'bg-green-500/20 border-green-500/40 hover:bg-green-500/30'
-                }
-            `}
-            title={offlineMode.isOffline ? 'Passer en mode en ligne' : 'Passer en mode hors ligne'}
-        >
-            <FontAwesomeIcon
-                icon={offlineMode.isOffline ? faCircle : faWifi}
-                className={`w-3 h-3 ${offlineMode.isOffline ? 'text-orange-300' : 'text-green-300'}`}
-            />
-            <span className={`text-xs font-medium ${offlineMode.isOffline ? 'text-orange-200' : 'text-green-200'}`}>
-                {offlineMode.isOffline ? 'Hors ligne' : 'En ligne'}
-            </span>
-        </button>
-    );
-}
+'use client';
+
+import { useContext } from 'react';
+import OfflineContext from '@/context/OfflineContext';
+import { Wifi, Circle } from 'lucide-react';
+
+export default function OfflineToggle() {
+    const { offlineMode, toggleOfflineMode } = useContext(OfflineContext);
+
+    if (!offlineMode.isDatabaseInitialized) {
+        return null;
+    }
+
+    const handleToggle = () => {
+        toggleOfflineMode();
+    };
+
+    return (
+        <button
+            onClick={handleToggle}
+            className={`
+                flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all
+                ${offlineMode.isOffline
+                    ? 'bg-orange-500/20 border-orange-500/40 hover:bg-orange-500/30'
+                    : 'bg-green-500/20 border-green-500/40 hover:bg-green-500/30'
+                }
+            `}
+            title={offlineMode.isOffline ? 'Passer en mode en ligne' : 'Passer en mode hors ligne'}
+        >
+            {offlineMode.isOffline
+                ? <Circle className="w-3 h-3 text-orange-300" />
+                : <Wifi className="w-3 h-3 text-green-300" />
+            }
+            <span className={`text-xs font-medium ${offlineMode.isOffline ? 'text-orange-200' : 'text-green-200'}`}>
+                {offlineMode.isOffline ? 'Hors ligne' : 'En ligne'}
+            </span>
+        </button>
+    );
+}
diff --git a/components/quillsense/QuillSenseComponent.tsx b/components/quillsense/QuillSenseComponent.tsx
index ab2ae7a..be491a3 100644
--- a/components/quillsense/QuillSenseComponent.tsx
+++ b/components/quillsense/QuillSenseComponent.tsx
@@ -1,105 +1,89 @@
-import {useContext, useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {
-    faBars,
-    faComments,
-    faExchangeAlt,
-    faLanguage,
-    faLightbulb,
-    faSpellCheck,
-    IconDefinition
-} from '@fortawesome/free-solid-svg-icons';
-import QuillSense, {QSView,} from "@/lib/models/QuillSense";
+import React, {useContext, useState} from 'react';
+import {ArrowLeftRight, Languages, Lightbulb, LucideIcon, Menu, MessageSquare, SpellCheck} from 'lucide-react';
+import IconContainer from '@/components/ui/IconContainer';
+import IconButton from '@/components/ui/IconButton';
+import {QSView} from "@/lib/types/quillsense";
+import {getSubLevel, isBringYourKeys, isOpenAIEnabled} from "@/lib/utils/quillsense";
 
 import QuillList from "@/components/quillsense/modes/QuillList";
 import QuillConversation from "./modes/QuillConversation";
 import Dictionary from "@/components/quillsense/modes/Dictionary";
 import Synonyms from "@/components/quillsense/modes/Synonyms";
 import InspireMe from "@/components/quillsense/modes/InspireMe";
-import {SessionContext} from "@/context/SessionContext";
-import {useTranslations} from "next-intl";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {useTranslations} from '@/lib/i18n';
 import Conjugator from "@/components/quillsense/modes/Conjugator";
 
 interface QSOption {
     view: QSView;
-    icon: IconDefinition;
+    icon: LucideIcon;
 }
 
-export default function QuillSenseComponent() {
+export default function QuillSenseComponent(): React.JSX.Element {
     const [view, setView] = useState<QSView>('chat');
     const t = useTranslations();
     const [selectedConversation, setSelectedConversation] = useState<string>('');
-    const {session} = useContext(SessionContext);
-    
-    const isBringYourKeys: boolean = QuillSense.isBringYourKeys(session);
-    const subLevel: number = QuillSense.getSubLevel(session)
-    
-    const isGPTEnabled: boolean = QuillSense.isOpenAIEnabled(session);
-    const isSubTierTwo: boolean = QuillSense.getSubLevel(session) >= 1;
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+
+    const isBYOK: boolean = isBringYourKeys(session);
+    const subLevel: number = getSubLevel(session)
+
+    const isGPTEnabled: boolean = isOpenAIEnabled(session);
+    const isSubTierTwo: boolean = getSubLevel(session) >= 1;
     const hasAccess: boolean = isGPTEnabled || isSubTierTwo;
-    
+
     const qsOptions: QSOption[] = [
-        {view: 'dictionary', icon: faSpellCheck},
-        {view: 'conjugator', icon: faLanguage},
-        {view: 'synonyms', icon: faExchangeAlt},
-        {view: 'inspiration', icon: faLightbulb},
-        {view: 'chat', icon: faComments},
+        {view: 'dictionary', icon: SpellCheck},
+        {view: 'conjugator', icon: Languages},
+        {view: 'synonyms', icon: ArrowLeftRight},
+        {view: 'inspiration', icon: Lightbulb},
+        {view: 'chat', icon: MessageSquare},
     ];
     
     function handleSetView(view: QSView): void {
         setView(view);
     }
     
-    function handleSelectConversation(conversationId: string) {
+    function handleSelectConversation(conversationId: string): void {
         setSelectedConversation(conversationId);
         setView('chat');
     }
     
     return (
-        <div className="flex flex-col h-full w-full bg-secondary/20 backdrop-blur-sm overflow-hidden">
+        <div className="flex flex-col h-full w-full bg-darkest-background overflow-hidden">
             <div
-                className="px-3 py-3 flex items-center justify-between border-b border-secondary/50 bg-secondary/30 shadow-sm">
+                className="px-3 py-3 flex items-center justify-between bg-darkest-background">
                 <div className="flex items-center">
-                    <button
-                        onClick={() => handleSetView(view === 'chat' ? 'list' : 'chat')}
-                        className="group text-text-primary mr-3 hover:text-primary p-2 rounded-lg hover:bg-secondary/50 transition-all hover:scale-110"
-                        aria-label={t('quillSense.toggleList')}
-                    >
-                        <FontAwesomeIcon icon={faBars}
-                                         className={'w-5 h-5 transition-transform group-hover:scale-110'}/>
-                    </button>
+                    <div className="mr-3">
+                        <IconButton icon={Menu} variant="ghost" shape="square"
+                                    onClick={(): void => handleSetView(view === 'chat' ? 'list' : 'chat')}
+                                    tooltip={t('quillSense.toggleList')}/>
+                    </div>
                 </div>
                 <div className="flex items-center gap-1">
                     {
-                        qsOptions.map((option: QSOption) => (
-                            <button
+                        qsOptions.map((option: QSOption): React.JSX.Element => (
+                            <IconButton
                                 key={option.view}
-                                disabled={!isBringYourKeys && subLevel < 2 && option.view !== 'chat'}
+                                icon={option.icon}
+                                variant={view === option.view ? 'primary' : 'ghost'}
+                                shape="square"
+                                disabled={!isBYOK && subLevel < 2 && option.view !== 'chat'}
                                 onClick={(): void => handleSetView(option.view)}
-                                className={`group p-2.5 rounded-lg transition-all duration-200 ${
-                                    view === option.view
-                                        ? 'bg-primary text-white shadow-md shadow-primary/30 scale-105'
-                                        : !isBringYourKeys && subLevel < 2 && option.view !== 'chat'
-                                            ? 'text-muted/40 cursor-not-allowed'
-                                            : 'text-text-primary hover:text-primary hover:bg-secondary/50 hover:scale-110'
-                                }`}
-                                aria-label={t(`quillSense.options.${option.view}`)}
-                            >
-                                <FontAwesomeIcon icon={option.icon}
-                                                 className={'w-4 h-4 transition-transform group-hover:scale-110'}/>
-                            </button>
+                                tooltip={t(`quillSense.options.${option.view}`)}
+                            />
                         ))
                     }
                 </div>
             </div>
             {
-                isBringYourKeys || subLevel >= 1 ? (
+                isBYOK || subLevel >= 1 ? (
                     <>
                         {view === 'list' ? (
                             <QuillList handleSelectConversation={handleSelectConversation}/>
                         ) : view === 'chat' ? (
                             <QuillConversation
-                                disabled={!isBringYourKeys && subLevel < 2}
+                                disabled={!isBYOK && subLevel < 2}
                                 selectedConversation={selectedConversation}
                                 setSelectConversation={setSelectedConversation}
                             />
@@ -117,10 +101,7 @@ export default function QuillSenseComponent() {
                     </>
                 ) : (
                     <div className="flex flex-col items-center justify-center h-full text-text-primary p-8">
-                        <div
-                            className="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 shadow-md">
-                            <FontAwesomeIcon icon={faLightbulb} className="w-10 h-10 text-primary"/>
-                        </div>
+                        <IconContainer icon={Lightbulb} size="lg" shape="rounded"/>
                         <p className="text-xl font-['ADLaM_Display'] text-center mb-3">{t('quillSense.needSubscription')}</p>
                         <p className="text-lg text-muted text-center max-w-md leading-relaxed">{t('quillSense.subscriptionDescription')}</p>
                     </div>
@@ -128,4 +109,4 @@ export default function QuillSenseComponent() {
             }
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/components/quillsense/modes/Conjugator.tsx b/components/quillsense/modes/Conjugator.tsx
index d7bdf48..2fc1313 100644
--- a/components/quillsense/modes/Conjugator.tsx
+++ b/components/quillsense/modes/Conjugator.tsx
@@ -1,41 +1,24 @@
-import {AlertContext} from "@/context/AlertContext";
-import {SessionContext} from "@/context/SessionContext";
-import System from "@/lib/models/System";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {apiPost} from '@/lib/api/client';
 import {ChangeEvent, JSX, useContext, useState} from "react";
 import InputField from "@/components/form/InputField";
-import {faLanguage, faLock, faMagnifyingGlass} from "@fortawesome/free-solid-svg-icons";
+import {Languages, Search} from "lucide-react";
 import TextInput from "@/components/form/TextInput";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import {useTranslations} from "next-intl";
-import {AIVerbConjugation} from "@/lib/models/QuillSense";
+import {useTranslations} from '@/lib/i18n';
+import {AIVerbConjugation, ConjugationResponse, ConjugationTenses} from "@/lib/types/quillsense";
 import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
-
-interface ConjugationTenses {
-    [tense: string]: {
-        firstPersonSingular?: string;
-        secondPersonSingular?: string;
-        thirdPersonSingular?: string;
-        firstPersonPlural?: string;
-        secondPersonPlural?: string;
-        thirdPersonPlural?: string;
-        présent?: string;
-        passé?: string;
-    } | string;
-}
-
-interface ConjugationResponse {
-    conjugations: {
-        [mode: string]: ConjugationTenses;
-    };
-}
+import EmptyState from "@/components/ui/EmptyState";
+import PulseLoader from "@/components/ui/PulseLoader";
+import LockCard from "@/components/ui/LockCard";
 
 export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
-    const {session} = useContext(SessionContext);
-    const {errorMessage} = useContext(AlertContext);
-    const {lang} = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
     const t = useTranslations();
-    const {setTotalCredits, setTotalPrice} = useContext<AIUsageContextProps>(AIUsageContext);
+    const {setTotalCredits, setTotalPrice}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext);
     const [verbToConjugate, setVerbToConjugate] = useState<string>('');
     const [inProgress, setInProgress] = useState<boolean>(false);
     const [conjugationResponse, setConjugationResponse] = useState<ConjugationResponse | null>(null);
@@ -46,7 +29,7 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
         }
         setInProgress(true);
         try {
-            const response: AIVerbConjugation = await System.authPostToServer<AIVerbConjugation>(
+            const response: AIVerbConjugation = await apiPost<AIVerbConjugation>(
                 `quillsense/verb-conjugation`,
                 {verb: verbToConjugate},
                 session.accessToken,
@@ -61,7 +44,7 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
             } else {
                 setTotalCredits(response.totalPrice)
             }
-            setConjugationResponse(response.data as ConjugationResponse);
+            setConjugationResponse(response.data);
         } catch (e: unknown) {
             if (e instanceof Error) {
                 errorMessage(e.message);
@@ -77,14 +60,14 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
         if (typeof conjugations === 'string') {
             return (
                 <div key={tense} className="mb-4">
-                    <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
+                    <div className="bg-tertiary rounded-xl p-4">
                         <span className="text-text-primary">{conjugations}</span>
                     </div>
                 </div>
             );
         }
         if (typeof conjugations === 'object' && conjugations !== null) {
-            const hasPersonConjugations = conjugations.firstPersonSingular || conjugations.secondPersonSingular ||
+            const hasPersonConjugations: string | undefined = conjugations.firstPersonSingular || conjugations.secondPersonSingular ||
                 conjugations.thirdPersonSingular || conjugations.firstPersonPlural ||
                 conjugations.secondPersonPlural || conjugations.thirdPersonPlural;
             if (hasPersonConjugations) {
@@ -93,7 +76,7 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
                         <h4 className="text-primary font-medium mb-3 capitalize">
                             {tense}
                         </h4>
-                        <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
+                        <div className="bg-tertiary rounded-xl p-4">
                             <div className="grid grid-cols-2 gap-2">
                                 {conjugations.firstPersonSingular && (
                                     <div className="flex">
@@ -144,17 +127,18 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
         if (mode === 'infinitif' || mode === 'participe') {
             return (
                 <div key={mode} className="mb-8">
-                    <h3 className="text-lg font-['ADLaM_Display'] text-primary mb-4 capitalize border-b border-primary/20 pb-2">
+                    <h3 className="text-lg font-['ADLaM_Display'] text-primary mb-4 capitalize border-b border-primary pb-2">
                         {mode}
                     </h3>
                     <div className="ml-4 space-y-4">
-                        {Object.entries(tenses).map(([tense, conjugation]: [string, string | ConjugationTenses[string]]) => (
+                        {Object.entries(tenses).map(([tense, conjugation]: [string, string | ConjugationTenses[string]]): JSX.Element => (
                             <div key={tense} className="mb-4">
                                 <h4 className="text-primary font-medium mb-2 capitalize">
                                     {tense}
                                 </h4>
-                                <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
-                                    <span className="text-text-primary">{conjugation as string}</span>
+                                <div className="bg-tertiary rounded-xl p-4">
+                                    <span
+                                        className="text-text-primary">{typeof conjugation === 'string' ? conjugation : ''}</span>
                                 </div>
                             </div>
                         ))}
@@ -164,11 +148,11 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
         }
         return (
             <div key={mode} className="mb-8">
-                <h3 className="text-xl font-semibold text-primary mb-4 capitalize border-b border-primary/20 pb-2">
+                <h3 className="text-xl font-semibold text-primary mb-4 capitalize border-b border-primary pb-2">
                     {mode}
                 </h3>
                 <div className="ml-4">
-                    {Object.entries(tenses).map(([tense, conjugations]) =>
+                    {Object.entries(tenses).map(([tense, conjugations]: [string, ConjugationTenses[string]]): JSX.Element =>
                         renderConjugationTable(tense, conjugations)
                     )}
                 </div>
@@ -177,84 +161,47 @@ export default function Conjugator({hasKey}: { hasKey: boolean }): JSX.Element {
     }
     
     if (!hasKey) {
-        return (
-            <div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm">
-                <div className="flex-1 p-6 overflow-y-auto flex items-center justify-center">
-                    <div className="max-w-md mx-auto">
-                        <div
-                            className="bg-tertiary/90 backdrop-blur-sm border border-secondary/50 rounded-2xl p-8 text-center shadow-2xl">
-                            <div
-                                className="w-20 h-20 mx-auto mb-6 bg-primary rounded-2xl flex items-center justify-center shadow-lg">
-                                <FontAwesomeIcon icon={faLock} className="w-10 h-10 text-text-primary"/>
-                            </div>
-                            <h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-4">
-                                {t('conjugator.locked.title')}
-                            </h3>
-                            <p className="text-muted leading-relaxed text-lg">
-                                {t('conjugator.locked.description')}
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
+        return <LockCard title={t('conjugator.locked.title')} description={t('conjugator.locked.description')}/>;
     }
     
     return (
-        <div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm overflow-hidden">
-            <div className="p-5 border-b border-secondary/50 bg-secondary/30 shadow-sm">
+        <div className="flex flex-col h-full overflow-hidden">
+            <div className="p-5 bg-darkest-background">
                 <InputField
                     input={
                         <TextInput
                             value={verbToConjugate}
-                            setValue={(e: ChangeEvent<HTMLInputElement>) => setVerbToConjugate(e.target.value)}
+                            setValue={(e: ChangeEvent<HTMLInputElement>): void => setVerbToConjugate(e.target.value)}
                             placeholder={t('conjugator.input.placeholder')}
                         />
                     }
-                    icon={faLanguage}
+                    icon={Languages}
                     fieldName={t('conjugator.input.label')}
                     actionLabel={t('conjugator.input.action')}
-                    actionIcon={faMagnifyingGlass}
+                    actionIcon={Search}
                     action={async (): Promise<void> => handleConjugation()}
                 />
             </div>
             <div className="flex-1 overflow-y-auto p-4">
                 {inProgress && (
-                    <div className="flex items-center justify-center h-32">
-                        <div className="animate-pulse flex flex-col items-center">
-                            <div
-                                className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-3"></div>
-                            <p className="text-text-secondary">{t('conjugator.loading')}</p>
-                        </div>
-                    </div>
+                    <PulseLoader text={t('conjugator.loading')}/>
                 )}
                 {!inProgress && conjugationResponse && (
-                    <div
-                        className="rounded-xl bg-tertiary/90 backdrop-blur-sm shadow-lg overflow-hidden border border-secondary/50">
-                        <div className="bg-primary/10 p-4 border-b border-secondary/30">
-                            <h3 className="text-xl font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
-                                <FontAwesomeIcon icon={faLanguage} className="text-primary w-6 h-6"/>
-                                <span>{verbToConjugate}</span>
-                            </h3>
-                        </div>
-                        <div className="p-5">
-                            {Object.entries(conjugationResponse.conjugations).map(([mode, tenses]: [string, ConjugationTenses]) =>
+                    <div className="space-y-4">
+                        <h3 className="text-lg font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
+                            <Languages className="text-primary w-5 h-5" strokeWidth={1.75}/>
+                            <span>{verbToConjugate}</span>
+                        </h3>
+                        <div>
+                            {Object.entries(conjugationResponse.conjugations).map(([mode, tenses]: [string, ConjugationTenses]): JSX.Element =>
                                 renderMode(mode, tenses)
                             )}
                         </div>
                     </div>
                 )}
                 {!inProgress && !conjugationResponse && (
-                    <div className="h-full flex flex-col items-center justify-center text-center p-8">
-                        <div
-                            className="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 shadow-md">
-                            <FontAwesomeIcon icon={faLanguage} className="text-primary w-10 h-10"/>
-                        </div>
-                        <h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-3">{t('conjugator.welcome.title')}</h3>
-                        <p className="text-muted max-w-md text-lg leading-relaxed">
-                            {t('conjugator.welcome.description')}
-                        </p>
-                    </div>
+                    <EmptyState icon={Languages} title={t('conjugator.welcome.title')}
+                                description={t('conjugator.welcome.description')}/>
                 )}
             </div>
         </div>
diff --git a/components/quillsense/modes/Dictionary.tsx b/components/quillsense/modes/Dictionary.tsx
index a76ebe7..53c0269 100644
--- a/components/quillsense/modes/Dictionary.tsx
+++ b/components/quillsense/modes/Dictionary.tsx
@@ -1,22 +1,24 @@
-import {AlertContext} from "@/context/AlertContext";
-import {SessionContext} from "@/context/SessionContext";
-import System from "@/lib/models/System";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {apiPost} from '@/lib/api/client';
 import {ChangeEvent, JSX, useContext, useState} from "react";
-import {AIDictionary, DictionaryAIResponse} from "@/lib/models/QuillSense";
+import {AIDictionary, DictionaryAIResponse} from "@/lib/types/quillsense";
 import InputField from "@/components/form/InputField";
-import {faLock, faMagnifyingGlass, faSpellCheck} from "@fortawesome/free-solid-svg-icons";
+import {Search, SpellCheck} from "lucide-react";
 import TextInput from "@/components/form/TextInput";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {useTranslations} from "next-intl";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
 import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
+import EmptyState from "@/components/ui/EmptyState";
+import PulseLoader from "@/components/ui/PulseLoader";
+import LockCard from "@/components/ui/LockCard";
 
 export default function Dictionary({hasKey}: { hasKey: boolean }): JSX.Element {
-    const {session} = useContext(SessionContext);
-    const {errorMessage} = useContext(AlertContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext)
-    const {setTotalCredits,setTotalPrice} = useContext<AIUsageContextProps>(AIUsageContext)
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext)
+    const {setTotalCredits, setTotalPrice}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext)
     const [wordToCheck, setWordToCheck] = useState<string>('');
     const [inProgress, setInProgress] = useState<boolean>(false);
     const [aiResponse, setAiResponse] = useState<DictionaryAIResponse | null>(null);
@@ -27,7 +29,7 @@ export default function Dictionary({hasKey}: { hasKey: boolean }): JSX.Element {
         }
         setInProgress(true);
         try {
-            const response: AIDictionary = await System.authPostToServer<AIDictionary>(
+            const response: AIDictionary = await apiPost<AIDictionary>(
                 `quillsense/dictionary`,
                 {word: wordToCheck},
                 session.accessToken,
@@ -37,8 +39,8 @@ export default function Dictionary({hasKey}: { hasKey: boolean }): JSX.Element {
                 errorMessage(t("dictionary.errorNoResponse"));
                 return;
             }
-            if (response.useYourKey){
-                setTotalPrice((prevState:number):number => prevState + response.totalPrice)
+            if (response.useYourKey) {
+                setTotalPrice((prevState: number): number => prevState + response.totalPrice)
             } else {
                 setTotalCredits(response.totalPrice)
             }
@@ -53,106 +55,65 @@ export default function Dictionary({hasKey}: { hasKey: boolean }): JSX.Element {
             setInProgress(false);
         }
     }
-    
+
     if (!hasKey) {
-        return (
-            <div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm">
-                <div className="flex-1 p-6 overflow-y-auto flex items-center justify-center">
-                    <div className="max-w-md mx-auto">
-                        <div
-                            className="bg-tertiary/90 backdrop-blur-sm border border-secondary/50 rounded-2xl p-8 text-center shadow-2xl">
-                            <div
-                                className="w-20 h-20 mx-auto mb-6 bg-primary rounded-2xl flex items-center justify-center shadow-lg">
-                                <FontAwesomeIcon icon={faLock} className="w-10 h-10 text-text-primary"/>
-                            </div>
-                            
-                            <h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-4">
-                                Accès requis
-                            </h3>
-                            
-                            <p className="text-muted leading-relaxed text-lg">
-                                Un abonnement de niveau de base de QuillSense ou une clé API OpenAI est requis pour
-                                activer le dictionnaire intelligent.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
+        return <LockCard title={t('dictionary.locked.title')}
+                         description={t('dictionary.locked.description')}/>;
     }
 
     return (
-        <div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm overflow-hidden">
-            <div className="p-5 border-b border-secondary/50 bg-secondary/30 shadow-sm">
+        <div className="flex flex-col h-full overflow-hidden">
+            <div className="p-5 bg-darkest-background">
                 <InputField
                     input={
                         <TextInput
                             value={wordToCheck}
-                            setValue={(e: ChangeEvent<HTMLInputElement>) => setWordToCheck(e.target.value)}
+                            setValue={(e: ChangeEvent<HTMLInputElement>): void => setWordToCheck(e.target.value)}
                             placeholder={t("dictionary.searchPlaceholder")}
                         />
                     }
-                    icon={faSpellCheck}
+                    icon={SpellCheck}
                     fieldName={t("dictionary.fieldName")}
                     actionLabel={t("dictionary.searchAction")}
-                    actionIcon={faMagnifyingGlass}
+                    actionIcon={Search}
                     action={async (): Promise<void> => handleSearch()}
                 />
             </div>
-            
+
             <div className="flex-1 overflow-y-auto p-4">
                 {inProgress && (
-                    <div className="flex items-center justify-center h-32">
-                        <div className="animate-pulse flex flex-col items-center">
-                            <div
-                                className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-3"></div>
-                            <p className="text-text-secondary">{t("dictionary.loading")}</p>
-                        </div>
-                    </div>
+                    <PulseLoader text={t("dictionary.loading")}/>
                 )}
                 
                 {!inProgress && aiResponse && (
-                    <div
-                        className="rounded-xl bg-tertiary/90 backdrop-blur-sm shadow-lg overflow-hidden border border-secondary/50">
-                        <div className="bg-primary/10 p-4 border-b border-secondary/30">
-                            <h3 className="text-xl font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
-                                <FontAwesomeIcon icon={faSpellCheck} className="text-primary w-6 h-6"/>
-                                <span>{wordToCheck}</span>
-                            </h3>
+                    <div className="space-y-4">
+                        <h3 className="text-lg font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
+                            <SpellCheck className="text-primary w-5 h-5" strokeWidth={1.75}/>
+                            <span>{wordToCheck}</span>
+                        </h3>
+                        
+                        <div className="bg-tertiary rounded-xl p-4">
+                            <h4 className="text-primary font-semibold mb-2 text-sm">{t("dictionary.definitionHeading")}</h4>
+                            <p className="text-text-primary text-sm leading-relaxed">{aiResponse.definition}</p>
                         </div>
                         
-                        <div className="p-5 space-y-5">
-                            <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
-                                <h4 className="text-primary font-semibold mb-2 text-base">{t("dictionary.definitionHeading")}</h4>
-                                <p className="text-text-primary leading-relaxed">{aiResponse.definition}</p>
-                            </div>
-                            
-                            <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
-                                <h4 className="text-primary font-semibold mb-2 text-base">{t("dictionary.exampleHeading")}</h4>
-                                <p className="text-text-primary italic leading-relaxed">{aiResponse.example}</p>
-                            </div>
-                            
-                            <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
-                                <h4 className="text-primary font-semibold mb-2 text-base">{t("dictionary.literaryUsageHeading")}</h4>
-                                <p className="text-text-primary leading-relaxed">{aiResponse.literaryUsage}</p>
-                            </div>
+                        <div className="bg-tertiary rounded-xl p-4">
+                            <h4 className="text-primary font-semibold mb-2 text-sm">{t("dictionary.exampleHeading")}</h4>
+                            <p className="text-text-primary text-sm italic leading-relaxed">{aiResponse.example}</p>
+                        </div>
+                        
+                        <div className="bg-tertiary rounded-xl p-4">
+                            <h4 className="text-primary font-semibold mb-2 text-sm">{t("dictionary.literaryUsageHeading")}</h4>
+                            <p className="text-text-primary text-sm leading-relaxed">{aiResponse.literaryUsage}</p>
                         </div>
                     </div>
                 )}
-                
+
                 {!inProgress && !aiResponse && (
-                    <div className="h-full flex flex-col items-center justify-center text-center p-8">
-                        <div
-                            className="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 shadow-md">
-                            <FontAwesomeIcon icon={faSpellCheck} className="text-primary w-10 h-10"/>
-                        </div>
-                        <h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-3">{t("dictionary.fieldName")}</h3>
-                        <p className="text-muted max-w-md text-lg leading-relaxed">
-                            {t("dictionary.description")}
-                        </p>
-                    </div>
+                    <EmptyState icon={SpellCheck} title={t("dictionary.fieldName")}
+                                description={t("dictionary.description")}/>
                 )}
             </div>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/components/quillsense/modes/InspireMe.tsx b/components/quillsense/modes/InspireMe.tsx
index 357b27d..adf8b43 100644
--- a/components/quillsense/modes/InspireMe.tsx
+++ b/components/quillsense/modes/InspireMe.tsx
@@ -1,34 +1,37 @@
-import {ChangeEvent, useContext, useEffect, useState} from "react";
-import {SessionContext} from "@/context/SessionContext";
-import {BookContext} from "@/context/BookContext";
-import {ChapterContext} from "@/context/ChapterContext";
-import {AlertContext} from "@/context/AlertContext";
-import {AIInspire, InspirationAIIdea} from "@/lib/models/QuillSense";
-import System from "@/lib/models/System";
+import React, {ChangeEvent, useContext, useEffect, useState} from "react";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {ChapterContext, ChapterContextProps} from "@/context/ChapterContext";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {AIInspire, InspirationAIIdea} from "@/lib/types/quillsense";
+import {apiPost} from '@/lib/api/client';
+import {htmlToText} from '@/lib/utils/html';
 import InputField from "@/components/form/InputField";
 import TextInput from "@/components/form/TextInput";
-import {faArrowRight, faLightbulb, faLink, faLock} from "@fortawesome/free-solid-svg-icons";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {useTranslations} from "next-intl";
+import {ArrowRight, Lightbulb, Link} from "lucide-react";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import {EditorContext} from "@/context/EditorContext";
+import {EditorContext, EditorContextProps} from "@/context/EditorContext";
 import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
+import EmptyState from "@/components/ui/EmptyState";
+import PulseLoader from "@/components/ui/PulseLoader";
+import LockCard from "@/components/ui/LockCard";
 
-export default function InspireMe({hasKey}: { hasKey: boolean }) {
+export default function InspireMe({hasKey}: { hasKey: boolean }): React.JSX.Element {
     const t = useTranslations();
-    const {session} = useContext(SessionContext);
-    const {editor} = useContext(EditorContext);
-    const {book} = useContext(BookContext);
-    const {chapter} = useContext(ChapterContext);
-    const {errorMessage} = useContext(AlertContext);
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {setTotalCredits, setTotalPrice} = useContext<AIUsageContextProps>(AIUsageContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {editor}: EditorContextProps = useContext<EditorContextProps>(EditorContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {chapter}: ChapterContextProps = useContext<ChapterContextProps>(ChapterContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {setTotalCredits, setTotalPrice}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext);
     const [prompt, setPrompt] = useState<string>('');
-    
+
     const [hideHelp, setHideHelp] = useState<boolean>(true);
     const [loading, setLoading] = useState<boolean>(false);
     const [inspirations, setInspirations] = useState<InspirationAIIdea[]>([]);
-    
+
     useEffect((): void => {
         if (prompt.trim().length > 0) {
             setHideHelp(true);
@@ -36,7 +39,7 @@ export default function InspireMe({hasKey}: { hasKey: boolean }) {
             setHideHelp(false);
         }
     }, [prompt]);
-    
+
     async function handleInspireMe(): Promise<void> {
         if (prompt.trim() === '') {
             errorMessage(t("inspireMe.emptyPromptError"));
@@ -44,36 +47,34 @@ export default function InspireMe({hasKey}: { hasKey: boolean }) {
         }
         setLoading(true);
         setInspirations([]);
-        
+
         try {
             let content: string = '';
             if (editor) {
                 try {
                     content = editor.getHTML();
-                    content = System.htmlToText(content);
+                    content = htmlToText(content);
                 } catch (e: unknown) {
                     if (e instanceof Error) {
-                        errorMessage('Erreur lors de la récupération du contenu.');
-                        console.error('Erreur lors de la récupération du contenu.');
+                        errorMessage(t('inspireMe.error.contentRetrieval'));
                     } else {
-                        errorMessage('Erreur inconnue lors de la récupération du contenu.')
-                        console.error('Erreur inconnue lors de la récupération du contenu.');
+                        errorMessage(t('inspireMe.error.contentRetrievalUnknown'));
                     }
                     setLoading(false);
                     return;
                 }
             }
             if (!book?.bookId) {
-                errorMessage('Aucun livre sélectionné.');
+                errorMessage(t('inspireMe.error.noBook'));
                 setLoading(false);
                 return;
             }
             if (chapter?.chapterOrder === undefined) {
-                errorMessage('Aucun chapitre sélectionné.');
+                errorMessage(t('inspireMe.error.noChapter'));
                 setLoading(false);
                 return;
             }
-            const inspire: AIInspire = await System.authPostToServer<AIInspire>(
+            const inspire: AIInspire = await apiPost<AIInspire>(
                 `quillsense/inspire`,
                 {
                     prompt: prompt,
@@ -94,106 +95,72 @@ export default function InspireMe({hasKey}: { hasKey: boolean }) {
             if (e instanceof Error) {
                 errorMessage(e.message);
             } else {
-                errorMessage(`Une erreur inconnue est survenue lors de la génération.`);
+                errorMessage(t('inspireMe.error.unknown'));
             }
         } finally {
             setLoading(false);
         }
     }
-    
+
     if (!hasKey) {
-        return (
-            <div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm">
-                <div className="flex-1 p-6 overflow-y-auto flex items-center justify-center">
-                    <div className="max-w-md mx-auto">
-                        <div
-                            className="bg-tertiary/90 backdrop-blur-sm border border-secondary/50 rounded-2xl p-8 text-center shadow-2xl">
-                            <div
-                                className="w-20 h-20 mx-auto mb-6 bg-primary rounded-2xl flex items-center justify-center shadow-lg">
-                                <FontAwesomeIcon icon={faLock} className="w-10 h-10 text-text-primary"/>
-                            </div>
-                            
-                            <h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-4">
-                                Accès requis
-                            </h3>
-                            
-                            <p className="text-muted leading-relaxed text-lg">
-                                Un abonnement de niveau de base de QuillSense ou une clé API OpenAI est requis pour
-                                activer le mode "Inspire-moi".
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
+        return <LockCard title={t('inspireMe.locked.title')}
+                         description={t('inspireMe.locked.description')}/>;
     }
-    
+
     return (
-        <div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm overflow-hidden">
-            <div className="p-5 border-b border-secondary/50 bg-secondary/30 shadow-sm">
+        <div className="flex flex-col h-full overflow-hidden">
+            <div className="p-5 bg-darkest-background">
                 <InputField
                     input={
                         <TextInput
                             value={prompt}
-                            setValue={(e: ChangeEvent<HTMLInputElement>) => setPrompt(e.target.value)}
+                            setValue={(e: ChangeEvent<HTMLInputElement>): void => setPrompt(e.target.value)}
                             placeholder={t("inspireMe.inputPlaceholder")}
                         />
                     }
-                    icon={faLightbulb}
+                    icon={Lightbulb}
                     fieldName={t("inspireMe.fieldName")}
                     actionLabel={t("inspireMe.actionLabel")}
-                    actionIcon={faLightbulb}
-                    action={async () => handleInspireMe()}
+                    actionIcon={Lightbulb}
+                    action={async (): Promise<void> => handleInspireMe()}
                 />
             </div>
             
             <div className="flex-1 overflow-y-auto p-4">
                 {loading && (
-                    <div className="flex items-center justify-center h-32">
-                        <div className="animate-pulse flex flex-col items-center">
-                            <div
-                                className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-3"></div>
-                            <p className="text-text-secondary">{t("inspireMe.loading")}</p>
-                        </div>
-                    </div>
+                    <PulseLoader text={t("inspireMe.loading")}/>
                 )}
                 
                 {!loading && inspirations.length > 0 && (
-                    <div
-                        className="rounded-xl bg-tertiary/90 backdrop-blur-sm shadow-lg overflow-hidden border border-secondary/50">
-                        <div className="bg-primary/10 p-4 border-b border-secondary/30">
-                            <h3 className="text-xl font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
-                                <FontAwesomeIcon icon={faLightbulb} className="text-primary w-6 h-6"/>
-                                <span>{t("inspireMe.resultHeading")}</span>
-                            </h3>
-                        </div>
+                    <div className="space-y-4">
+                        <h3 className="text-lg font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
+                            <Lightbulb className="text-primary w-5 h-5" strokeWidth={1.75}/>
+                            <span>{t("inspireMe.resultHeading")}</span>
+                        </h3>
                         
-                        <div className="p-5 space-y-6">
-                            {inspirations.map((idea, index) => (
+                        <div className="space-y-4">
+                            {inspirations.map((idea: InspirationAIIdea, index: number): React.JSX.Element => (
                                 <div key={index}
-                                     className="bg-secondary/20 rounded-xl shadow-md border border-secondary/30 hover:border-primary/50 hover:shadow-lg hover:scale-102 transition-all duration-200 overflow-hidden">
-                                    <div className="p-4 bg-primary/10 border-b border-secondary/30">
-                                        <h4 className="text-lg font-semibold text-primary">{idea.idea}</h4>
-                                    </div>
-                                    
+                                     className="bg-tertiary rounded-xl hover:bg-secondary transition-colors duration-150 overflow-hidden">
                                     <div className="p-4">
-                                        <div className="mb-4">
-                                            <div className="flex items-center mb-1.5 text-sm text-text-secondary">
-                                                <FontAwesomeIcon icon={faArrowRight}
-                                                                 className="mr-1.5 text-primary w-5 h-5"/>
+                                        <h4 className="text-sm font-semibold text-primary mb-3">{idea.idea}</h4>
+                                        
+                                        <div className="mb-3">
+                                            <div className="flex items-center mb-1.5 text-xs text-text-secondary">
+                                                <ArrowRight className="mr-1.5 text-primary w-4 h-4" strokeWidth={1.75}/>
                                                 <span>{t("inspireMe.justificationHeading")}</span>
                                             </div>
-                                            <p className="text-text-primary pl-5">{idea.reason}</p>
+                                            <p className="text-text-primary text-sm pl-5">{idea.reason}</p>
                                         </div>
-                                        
+
                                         <div>
-                                            <div className="flex items-center mb-1.5 text-sm text-text-secondary">
-                                                <FontAwesomeIcon icon={faLink} className="mr-1.5 text-primary w-5 h-5"/>
+                                            <div className="flex items-center mb-1.5 text-xs text-text-secondary">
+                                                <Link className="mr-1.5 text-primary w-4 h-4" strokeWidth={1.75}/>
                                                 <span>{t("inspireMe.linkHeading")}</span>
                                             </div>
                                             <div className="pl-5">
                                                 <span
-                                                    className="text-xs bg-secondary/50 text-text-secondary px-2.5 py-1 rounded-lg inline-block border border-secondary/50">
+                                                    className="text-xs bg-secondary text-text-secondary px-2.5 py-1 rounded-lg inline-block">
                                                     {idea.relatedTo}
                                                 </span>
                                             </div>
@@ -204,20 +171,12 @@ export default function InspireMe({hasKey}: { hasKey: boolean }) {
                         </div>
                     </div>
                 )}
-                
+
                 {!loading && inspirations.length === 0 && (
-                    <div className="h-full flex flex-col items-center justify-center text-center p-8">
-                        <div
-                            className="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 shadow-md">
-                            <FontAwesomeIcon icon={faLightbulb} className="text-primary w-10 h-10"/>
-                        </div>
-                        <h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-3">{t("inspireMe.emptyHeading")}</h3>
-                        <p className="text-muted max-w-md text-lg leading-relaxed">
-                            {t("inspireMe.emptyDescription")}
-                        </p>
-                    </div>
+                    <EmptyState icon={Lightbulb} title={t("inspireMe.emptyHeading")}
+                                description={t("inspireMe.emptyDescription")}/>
                 )}
             </div>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/components/quillsense/modes/QuillConversation.tsx b/components/quillsense/modes/QuillConversation.tsx
index 91c98da..0e346ce 100644
--- a/components/quillsense/modes/QuillConversation.tsx
+++ b/components/quillsense/modes/QuillConversation.tsx
@@ -1,23 +1,19 @@
-import {
-    faBook,
-    faBookOpen,
-    faExclamationTriangle,
-    faLock,
-    faPaperPlane,
-    faRobot,
-    faUser
-} from '@fortawesome/free-solid-svg-icons';
-import {Dispatch, RefObject, SetStateAction, useContext, useEffect, useRef, useState,} from 'react';
-import QuillSense, {Conversation, ConversationType, Message} from "@/lib/models/QuillSense";
-import {ChapterContext} from "@/context/ChapterContext";
-import {BookContext} from "@/context/BookContext";
-import {AlertContext} from "@/context/AlertContext";
-import {SessionContext} from '@/context/SessionContext';
-import System from "@/lib/models/System";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {useTranslations} from "next-intl";
+import {AlertTriangle, Book, BookOpen, Bot, Send, User} from 'lucide-react';
+import React, {Dispatch, RefObject, SetStateAction, useContext, useEffect, useRef, useState,} from 'react';
+import {Conversation, ConversationType, Message} from "@/lib/types/quillsense";
+import {getSubLevel, isGeminiEnabled} from "@/lib/utils/quillsense";
+import {ChapterContext, ChapterContextProps} from "@/context/ChapterContext";
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {apiGet, apiPost} from '@/lib/api/client';
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
 import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
+import Button from "@/components/ui/Button";
+import IconButton from "@/components/ui/IconButton";
+import IconContainer from "@/components/ui/IconContainer";
+import LockCard from "@/components/ui/LockCard";
 
 interface QuillConversationProps {
     disabled: boolean;
@@ -32,15 +28,15 @@ export default function QuillConversation(
         disabled,
         selectedConversation,
         setSelectConversation,
-    }: QuillConversationProps) {
+    }: QuillConversationProps): React.JSX.Element {
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage} = useContext(AlertContext);
-    const {book} = useContext(BookContext);
-    const {chapter} = useContext(ChapterContext);
-    const {setTotalPrice} = useContext<AIUsageContextProps>(AIUsageContext)
-    
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {chapter}: ChapterContextProps = useContext<ChapterContextProps>(ChapterContext);
+    const {setTotalPrice, setTotalCredits}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext)
+
     const [inputText, setInputText] = useState<string>('');
     const [messages, setMessages] = useState<Message[]>([]);
     const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -49,13 +45,13 @@ export default function QuillConversation(
     const [pendingContextType, setPendingContextType] = useState<ContextType>('none');
     const messageContainerRef: RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
     const textareaRef: RefObject<HTMLTextAreaElement | null> = useRef<HTMLTextAreaElement>(null);
-    
+
     const [mode, setMode] = useState<ConversationType>('chatbot');
-    
-    const isGeminiEnabled: boolean = QuillSense.isGeminiEnabled(session);
-    const isSubTierTwo: boolean = QuillSense.getSubLevel(session) >= 2;
-    const hasAccess: boolean = isGeminiEnabled || isSubTierTwo;
-    
+
+    const geminiEnabled: boolean = isGeminiEnabled(session);
+    const isSubTierTwo: boolean = getSubLevel(session) >= 2;
+    const hasAccess: boolean = geminiEnabled || isSubTierTwo;
+
     function adjustTextareaHeight(): void {
         const textarea: HTMLTextAreaElement | null = textareaRef.current;
         if (textarea) {
@@ -64,7 +60,7 @@ export default function QuillConversation(
             textarea.style.height = `${newHeight}px`;
         }
     }
-    
+
     function scrollToBottom(): void {
         const messageContainer: HTMLDivElement | null = messageContainerRef.current;
         if (messageContainer) {
@@ -72,24 +68,20 @@ export default function QuillConversation(
         }
     }
     
-    function LoadingMessage() {
+    function LoadingMessage(): React.JSX.Element {
         return (
             <div className="flex mb-6 justify-start">
-                <div
-                    className="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center text-text-primary mr-3 shadow-lg">
-                    <FontAwesomeIcon icon={faRobot} className={'w-5 h-5'}/>
+                <div className="mr-3">
+                    <IconContainer icon={Bot} size="sm" shape="circle"/>
                 </div>
                 <div
-                    className="max-w-[75%] p-4 rounded-2xl bg-secondary/80 text-text-primary rounded-bl-md backdrop-blur-sm border border-secondary/50">
+                    className="max-w-[75%] p-4 rounded-2xl bg-secondary text-text-primary rounded-bl-md">
                     <div className="flex items-center space-x-2">
                         <span className="text-text-secondary text-sm">{t('quillConversation.loadingMessage')}</span>
                         <div className="flex space-x-1">
-                            <div className="w-2 h-2 bg-primary rounded-full animate-pulse"
-                                 style={{animationDelay: '0ms', animationDuration: '1.5s'}}></div>
-                            <div className="w-2 h-2 bg-primary rounded-full animate-pulse"
-                                 style={{animationDelay: '0.3s', animationDuration: '1.5s'}}></div>
-                            <div className="w-2 h-2 bg-primary rounded-full animate-pulse"
-                                 style={{animationDelay: '0.6s', animationDuration: '1.5s'}}></div>
+                            <div className="w-2 h-2 bg-primary rounded-full animate-pulse pulse-dot-1"></div>
+                            <div className="w-2 h-2 bg-primary rounded-full animate-pulse pulse-dot-2"></div>
+                            <div className="w-2 h-2 bg-primary rounded-full animate-pulse pulse-dot-3"></div>
                         </div>
                     </div>
                 </div>
@@ -97,18 +89,17 @@ export default function QuillConversation(
         );
     }
     
-    function WelcomeMessage() {
+    function WelcomeMessage(): React.JSX.Element {
         return (
             <div className="flex flex-col items-center justify-center h-full p-8">
-                <div
-                    className="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center text-text-primary mb-6 shadow-2xl">
-                    <FontAwesomeIcon icon={faRobot} className={'w-10 h-10'}/>
+                <div className="mb-6">
+                    <IconContainer icon={Bot} size="lg" shape="rounded"/>
                 </div>
                 <h2 className="text-2xl font-['ADLaM_Display'] text-text-primary mb-3">{t('quillConversation.welcomeTitle')}</h2>
                 <p className="text-muted text-center leading-relaxed text-lg max-w-md mb-6">
                     {t('quillConversation.welcomeDescription')}
                 </p>
-                <div className="bg-secondary/30 rounded-xl p-4 border border-secondary/50 backdrop-blur-sm shadow-md">
+                <div className="bg-tertiary rounded-xl p-4">
                     <p className="text-sm text-text-secondary text-center">
                         {t('quillConversation.welcomeTip')}
                     </p>
@@ -117,19 +108,18 @@ export default function QuillConversation(
         );
     }
     
-    function ContextAlert() {
+    function ContextAlert(): React.JSX.Element {
         const contextDescription: string = pendingContextType === 'chapter'
             ? t('quillConversation.contextAlert.chapter')
             : t('quillConversation.contextAlert.book');
 
         return (
-            <div className="fixed inset-0 bg-overlay flex items-center justify-center z-50">
-                <div
-                    className="bg-tertiary/90 backdrop-blur-sm border border-secondary/50 rounded-2xl p-6 max-w-md mx-4 shadow-2xl">
+            <div
+                className="fixed inset-0 bg-darkest-background/60 backdrop-blur-md flex items-center justify-center z-50">
+                <div className="bg-tertiary rounded-2xl p-5 max-w-md">
                     <div className="flex items-center mb-4">
-                        <div
-                            className="w-12 h-12 rounded-xl bg-warning/20 flex items-center justify-center mr-3 shadow-sm">
-                            <FontAwesomeIcon icon={faExclamationTriangle} className="w-6 h-6 text-warning"/>
+                        <div className="mr-3">
+                            <IconContainer icon={AlertTriangle} size="md" shape="square"/>
                         </div>
                         <h3 className="text-xl font-['ADLaM_Display'] text-text-primary">{t('quillConversation.contextAlert.title')}</h3>
                     </div>
@@ -137,31 +127,37 @@ export default function QuillConversation(
                         {contextDescription}
                     </p>
                     <div className="flex space-x-3">
-                        <button
-                            onClick={(): void => {
-                                setShowContextAlert(false);
-                                setPendingContextType('none');
-                            }}
-                            className="flex-1 px-4 py-2.5 bg-secondary/50 text-text-secondary rounded-xl hover:bg-secondary hover:text-text-primary transition-all duration-200 hover:scale-105 shadow-sm hover:shadow-md border border-secondary/50 font-medium"
-                        >
-                            {t('common.cancel')}
-                        </button>
-                        <button
-                            onClick={(): void => {
-                                setContextType(pendingContextType);
-                                setShowContextAlert(false);
-                                setPendingContextType('none');
-                            }}
-                            className="flex-1 px-4 py-2.5 bg-primary text-text-primary rounded-xl hover:bg-primary-dark transition-all duration-200 hover:scale-105 shadow-md hover:shadow-lg font-medium"
-                        >
-                            {t('common.confirm')}
-                        </button>
+                        <div className="flex-1">
+                            <Button
+                                variant="secondary"
+                                fullWidth
+                                onClick={(): void => {
+                                    setShowContextAlert(false);
+                                    setPendingContextType('none');
+                                }}
+                            >
+                                {t('common.cancel')}
+                            </Button>
+                        </div>
+                        <div className="flex-1">
+                            <Button
+                                variant="primary"
+                                fullWidth
+                                onClick={(): void => {
+                                    setContextType(pendingContextType);
+                                    setShowContextAlert(false);
+                                    setPendingContextType('none');
+                                }}
+                            >
+                                {t('common.confirm')}
+                            </Button>
+                        </div>
                     </div>
                 </div>
             </div>
         );
     }
-    
+
     function handleContextChange(type: ContextType): void {
         if (type === 'none') {
             setContextType('none');
@@ -189,7 +185,7 @@ export default function QuillConversation(
     async function getMessages(): Promise<void> {
         try {
             const response: Conversation =
-                await System.authGetQueryToServer<Conversation>(
+                await apiGet<Conversation>(
                     `quillsense/conversation`,
                     session.accessToken,
                     "fr",
@@ -197,7 +193,7 @@ export default function QuillConversation(
                 );
             if (response) {
                 setMessages(response.messages);
-                setMode((response.type as ConversationType) ?? 'chatbot');
+                setMode(response.type ?? 'chatbot');
             }
         } catch (e: unknown) {
             if (e instanceof Error) {
@@ -230,7 +226,7 @@ export default function QuillConversation(
             setInputText('');
             setIsLoading(true);
             
-            const response: Conversation = await System.authPostToServer<Conversation>('quillsense/chatbot/send', {
+            const response: Conversation = await apiPost<Conversation>('quillsense/chatbot/send', {
                 message: inputText,
                 bookId: book?.bookId || null,
                 chapterId: chapter?.chapterId || null,
@@ -267,7 +263,11 @@ export default function QuillConversation(
                         : updatedMessages;
                 });
                 
-                setTotalPrice((prevTotal: number): number => prevTotal + (response.totalPrice || 0));
+                if (response.useYourKey) {
+                    setTotalPrice((prevTotal: number): number => prevTotal + (response.totalPrice || 0));
+                } else {
+                    setTotalCredits(response.totalPrice || 0);
+                }
                 
                 if (selectedConversation === '') {
                     setSelectConversation(response.id);
@@ -275,7 +275,7 @@ export default function QuillConversation(
             }
         } catch (e: unknown) {
             if (e instanceof Error) {
-                errorMessage(t('quillConversation.sendError'));
+                errorMessage(e.message);
             } else {
                 errorMessage(t('quillConversation.genericError'));
             }
@@ -286,40 +286,20 @@ export default function QuillConversation(
     if (!hasAccess) {
         return (
             <div className="flex flex-col h-full">
-                <div className="flex-1 p-6 overflow-y-auto flex items-center justify-center">
-                    <div className="max-w-md mx-auto">
-                        <div
-                            className="bg-tertiary/90 backdrop-blur-sm border border-secondary/50 rounded-2xl p-8 text-center shadow-2xl">
-                            <div
-                                className="w-20 h-20 mx-auto mb-6 bg-primary rounded-2xl flex items-center justify-center shadow-lg">
-                                <FontAwesomeIcon icon={faLock} className="w-10 h-10 text-text-primary"/>
-                            </div>
-                            
-                            <h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-4">
-                                {t('quillConversation.accessRequired.title')}
-                            </h3>
-                            
-                            <p className="text-muted leading-relaxed text-lg">
-                                {t('quillConversation.accessRequired.description')}
-                            </p>
-                        </div>
-                    </div>
-                </div>
-                <div className="bg-secondary/30 backdrop-blur-sm border-t border-secondary/50 p-4 shadow-inner">
+                <LockCard title={t('quillConversation.accessRequired.title')}
+                          description={t('quillConversation.accessRequired.description')}/>
+                <div className="p-4">
                     <div
-                        className="flex items-center rounded-2xl bg-tertiary/30 p-3 border border-secondary/50 opacity-50">
+                        className="flex items-center rounded-2xl bg-tertiary p-3 opacity-50">
                         <textarea
                             disabled={true}
                             placeholder={t('quillConversation.inputPlaceholder')}
                             rows={1}
                             className="flex-1 bg-transparent border-0 outline-none px-4 py-2 text-text-primary placeholder-text-secondary resize-none overflow-hidden min-h-[42px] max-h-[120px] cursor-not-allowed"
                         />
-                        <button
-                            disabled={true}
-                            className="p-3 rounded-xl text-text-secondary cursor-not-allowed ml-2"
-                        >
-                            <FontAwesomeIcon icon={faPaperPlane} className="w-5 h-5"/>
-                        </button>
+                        <div className="ml-2">
+                            <IconButton icon={Send} variant="muted" size="lg" shape="square" disabled={true}/>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -332,22 +312,21 @@ export default function QuillConversation(
                 {messages.length === 0 && !isLoading ? (
                     <WelcomeMessage/>
                 ) : (
-                    messages.map((message: Message) => (
+                    messages.map((message: Message): React.JSX.Element => (
                         <div
                             key={message.id}
                             className={`flex mb-6 ${message.type === 'user' ? 'justify-end' : 'justify-start'}`}
                         >
                             {message.type === 'model' && (
-                                <div
-                                    className="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center text-text-primary mr-3 shadow-lg">
-                                    <FontAwesomeIcon icon={faRobot} className={'w-5 h-5'}/>
+                                <div className="mr-3">
+                                    <IconContainer icon={Bot} size="sm" shape="circle"/>
                                 </div>
                             )}
                             <div
-                                className={`max-w-[75%] p-4 rounded-2xl shadow-sm ${
+                                className={`max-w-[75%] p-4 rounded-2xl ${
                                     message.type === 'user'
-                                        ? 'bg-gradient-to-br from-primary to-primary-dark text-text-primary rounded-br-md'
-                                        : 'bg-secondary/80 text-text-primary rounded-bl-md backdrop-blur-sm border border-secondary/50'
+                                        ? 'bg-primary text-text-primary rounded-br-md'
+                                        : 'bg-tertiary text-text-primary rounded-bl-md'
                                 }`}
                             >
                                 <p className="leading-relaxed whitespace-pre-wrap">{message.message}</p>
@@ -360,9 +339,8 @@ export default function QuillConversation(
                                 </p>
                             </div>
                             {message.type === 'user' && (
-                                <div
-                                    className="w-10 h-10 rounded-full bg-gradient-to-br from-primary-dark to-tertiary flex items-center justify-center text-text-primary ml-3 shadow-lg">
-                                    <FontAwesomeIcon icon={faUser} className={'w-5 h-5'}/>
+                                <div className="ml-3">
+                                    <IconContainer icon={User} size="sm" shape="circle"/>
                                 </div>
                             )}
                         </div>
@@ -376,51 +354,33 @@ export default function QuillConversation(
                     <span
                         className="text-sm text-text-secondary font-medium">{t('quillConversation.contextLabel')}</span>
                     <div className="flex items-center space-x-2">
-                        <button
-                            onClick={(): void => handleContextChange('none')}
-                            className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
-                                contextType === 'none'
-                                    ? 'bg-primary text-text-primary'
-                                    : 'bg-secondary/50 text-text-secondary hover:bg-secondary hover:text-text-primary'
-                            }`}
-                        >
+                        <Button variant={contextType === 'none' ? 'primary' : 'secondary'} size="sm"
+                                onClick={(): void => handleContextChange('none')}>
                             {t('quillConversation.context.none')}
-                        </button>
+                        </Button>
                         {chapter && (
-                            <button
-                                onClick={(): void => handleContextChange('chapter')}
-                                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center space-x-1 ${
-                                    contextType === 'chapter'
-                                        ? 'bg-primary text-text-primary'
-                                        : 'bg-secondary/50 text-text-secondary hover:bg-secondary hover:text-text-primary'
-                                }`}
-                            >
-                                <FontAwesomeIcon icon={faBookOpen} className="w-3 h-3"/>
-                                <span>{t('quillConversation.context.chapter')}</span>
-                            </button>
+                            <Button variant={contextType === 'chapter' ? 'primary' : 'secondary'} size="sm"
+                                    icon={BookOpen}
+                                    onClick={(): void => handleContextChange('chapter')}>
+                                {t('quillConversation.context.chapter')}
+                            </Button>
                         )}
                         {book && (
-                            <button
-                                onClick={(): void => handleContextChange('book')}
-                                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center space-x-1 ${
-                                    contextType === 'book'
-                                        ? 'bg-primary text-text-primary'
-                                        : 'bg-secondary/50 text-text-secondary hover:bg-secondary hover:text-text-primary'
-                                }`}
-                            >
-                                <FontAwesomeIcon icon={faBook} className="w-3 h-3"/>
-                                <span>{t('quillConversation.context.book')}</span>
-                            </button>
+                            <Button variant={contextType === 'book' ? 'primary' : 'secondary'} size="sm"
+                                    icon={Book}
+                                    onClick={(): void => handleContextChange('book')}>
+                                {t('quillConversation.context.book')}
+                            </Button>
                         )}
                     </div>
                 </div>
-                <div className="flex items-end rounded-2xl bg-tertiary border border-secondary/50 shadow-inner">
+                <div className="flex items-end rounded-2xl bg-tertiary">
                     <textarea
                         disabled={disabled || isLoading}
                         ref={textareaRef}
                         value={inputText}
-                        onChange={(e) => setInputText(e.target.value)}
-                        onKeyDown={async (e) => {
+                        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>): void => setInputText(e.target.value)}
+                        onKeyDown={async (e: React.KeyboardEvent<HTMLTextAreaElement>): Promise<void> => {
                             if (e.key === 'Enter' && !e.shiftKey) {
                                 e.preventDefault();
                                 await handleSend();
@@ -430,21 +390,17 @@ export default function QuillConversation(
                         rows={1}
                         className="flex-1 bg-transparent border-0 outline-none px-4 text-text-primary placeholder-text-secondary resize-none overflow-hidden min-h-[42px] max-h-[120px] leading-relaxed"
                     />
-                    <button
-                        onClick={handleSend}
-                        disabled={inputText.trim() === '' || isLoading}
-                        className={`m-2 p-3 rounded-xl transition-all duration-200 ${
-                            inputText.trim() === '' || isLoading
-                                ? 'text-text-secondary bg-secondary/50 cursor-not-allowed'
-                                : 'text-text-primary bg-gradient-to-br from-primary to-primary-dark hover:from-primary-dark hover:to-primary shadow-lg hover:shadow-xl transform hover:scale-105'
-                        }`}
-                    >
-                        <FontAwesomeIcon icon={faPaperPlane} className={'w-5 h-5'}/>
-                    </button>
+                    <div className="m-2">
+                        <IconButton icon={Send}
+                                    variant={inputText.trim() === '' || isLoading ? 'muted' : 'primary'}
+                                    size="lg" shape="square"
+                                    onClick={handleSend}
+                                    disabled={inputText.trim() === '' || isLoading}/>
+                    </div>
                 </div>
             </div>
             
             {showContextAlert && <ContextAlert/>}
         </>
     );
-}
\ No newline at end of file
+}
diff --git a/components/quillsense/modes/QuillList.tsx b/components/quillsense/modes/QuillList.tsx
index 790f67d..74459a0 100644
--- a/components/quillsense/modes/QuillList.tsx
+++ b/components/quillsense/modes/QuillList.tsx
@@ -1,20 +1,24 @@
-import {faRobot} from '@fortawesome/free-solid-svg-icons';
-import {useContext, useEffect, useState} from 'react';
-import {SessionContext} from "@/context/SessionContext";
-import {ConversationProps} from "@/lib/models/QuillSense";
-import System from "@/lib/models/System";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {Bot} from 'lucide-react';
+import React, {useContext, useEffect, useState} from 'react';
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {ConversationProps} from "@/lib/types/quillsense";
+import {apiGet} from '@/lib/api/client';
 import {BookContext, BookContextProps} from "@/context/BookContext";
-import {LangContext} from "@/context/LangContext";
+import {LangContext, LangContextProps} from "@/context/LangContext";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {useTranslations} from '@/lib/i18n';
+import Badge from "@/components/ui/Badge";
 
 interface QuillListProps {
     handleSelectConversation: (itemId: string) => void;
 }
 
-export default function QuillList({handleSelectConversation}: QuillListProps) {
-    const {session} = useContext(SessionContext);
-    const {book} = useContext<BookContextProps>(BookContext);
-    const {lang} = useContext(LangContext);
+export default function QuillList({handleSelectConversation}: QuillListProps): React.JSX.Element {
+    const t = useTranslations();
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
     
     const [conversations, setConversations] = useState<ConversationProps[]>([]);
     
@@ -24,7 +28,7 @@ export default function QuillList({handleSelectConversation}: QuillListProps) {
     
     async function getConversations(): Promise<void> {
         try {
-            const response: ConversationProps[] = await System.authGetQueryToServer<ConversationProps[]>(
+            const response: ConversationProps[] = await apiGet<ConversationProps[]>(
                 `quillsense/conversations`,
                 session.accessToken,
                 lang,
@@ -35,8 +39,12 @@ export default function QuillList({handleSelectConversation}: QuillListProps) {
             if (response.length > 0) {
                 setConversations(response);
             }
-        } catch (e) {
-            console.error(e);
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t('quillList.error.unknown'));
+            }
         }
     }
     
@@ -45,7 +53,7 @@ export default function QuillList({handleSelectConversation}: QuillListProps) {
             case 1:
                 return 'bg-muted';
             case 2:
-                return 'bg-blue-500';
+                return 'bg-accent-blue';
             case 3:
                 return 'bg-primary';
             case 4:
@@ -57,25 +65,25 @@ export default function QuillList({handleSelectConversation}: QuillListProps) {
 
     return (
         <div className="flex-1 overflow-y-auto p-2">
-            {conversations.map((conversation: ConversationProps) => (
+            {conversations.map((conversation: ConversationProps): React.JSX.Element => (
                 <div key={conversation.id}
-                     className="flex items-center justify-between p-3 mb-2 rounded-xl bg-secondary/30 hover:bg-secondary hover:shadow-md cursor-pointer transition-all duration-200 border border-secondary/50 hover:border-secondary hover:scale-102"
+                     className="flex items-center justify-between p-3 mb-2 rounded-xl bg-tertiary hover:bg-secondary cursor-pointer transition-colors duration-150"
                      onClick={(): void => handleSelectConversation(conversation.id)}
                 >
                     <div className="flex items-center gap-3">
                         <div
-                            className={`w-2.5 h-2.5 rounded-full ${getStatusColorClass(conversation.status)} shadow-sm`}></div>
-                        <FontAwesomeIcon icon={faRobot} className="text-primary w-5 h-5"/>
+                            className={`w-2.5 h-2.5 rounded-full ${getStatusColorClass(conversation.status)}`}></div>
+                        <Bot className="text-primary w-5 h-5" strokeWidth={1.75}/>
                         <div>
-                            <span className="text-text-primary font-medium">{conversation.title || "Sans titre"}</span>
+                            <span
+                                className="text-text-primary font-medium">{conversation.title || t('quillList.untitled')}</span>
                             {conversation.startDate && (
                                 <p className="text-xs text-muted mt-0.5">{conversation.startDate}</p>
                             )}
                         </div>
                     </div>
                     {conversation.mode && (
-                        <span
-                            className="text-xs bg-primary/20 text-primary px-2.5 py-1 rounded-lg font-medium border border-primary/30">{conversation.mode}</span>
+                        <Badge size="sm">{conversation.mode}</Badge>
                     )}
                 </div>
             ))}
diff --git a/components/quillsense/modes/Synonyms.tsx b/components/quillsense/modes/Synonyms.tsx
index be786b1..511be62 100644
--- a/components/quillsense/modes/Synonyms.tsx
+++ b/components/quillsense/modes/Synonyms.tsx
@@ -1,26 +1,28 @@
-import {JSX, useContext, useState} from "react";
-import {SessionContext} from "@/context/SessionContext";
-import {AlertContext} from "@/context/AlertContext";
-import {AISynonyms, SynonymAI, SynonymsAIResponse} from "@/lib/models/QuillSense";
-import System from "@/lib/models/System";
-import {faExchangeAlt, faLock, faSearch} from "@fortawesome/free-solid-svg-icons";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {useTranslations} from "next-intl";
+import React, {JSX, useContext, useState} from "react";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {AISynonyms, SynonymAI, SynonymsAIResponse} from "@/lib/types/quillsense";
+import {apiPost} from '@/lib/api/client';
+import {ArrowLeftRight, Search} from "lucide-react";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
 import SearchInputWithSelect from "@/components/form/SearchInputWithSelect";
 import {AIUsageContext, AIUsageContextProps} from "@/context/AIUsageContext";
+import EmptyState from "@/components/ui/EmptyState";
+import PulseLoader from "@/components/ui/PulseLoader";
+import LockCard from "@/components/ui/LockCard";
 
 export default function Synonyms({hasKey}: { hasKey: boolean }): JSX.Element {
     const t = useTranslations();
-    const {session} = useContext(SessionContext);
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {errorMessage} = useContext(AlertContext);
-    const {setTotalCredits, setTotalPrice} = useContext<AIUsageContextProps>(AIUsageContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {setTotalCredits, setTotalPrice}: AIUsageContextProps = useContext<AIUsageContextProps>(AIUsageContext);
     const [type, setType] = useState<string>('synonymes')
     const [wordToCheck, setWordToCheck] = useState<string>('')
     const [inProgress, setInProgress] = useState<boolean>(false);
     const [aiResponse, setAiResponse] = useState<SynonymsAIResponse | null>(null)
-    
+
     async function handleSearch(): Promise<void> {
         if (wordToCheck.trim() === '') {
             errorMessage(t("synonyms.enterWordError"));
@@ -28,7 +30,7 @@ export default function Synonyms({hasKey}: { hasKey: boolean }): JSX.Element {
         }
         setInProgress(true);
         try {
-            const response: AISynonyms = await System.authPostToServer<AISynonyms>(`quillsense/synonyms`, {
+            const response: AISynonyms = await apiPost<AISynonyms>(`quillsense/synonyms`, {
                 word: wordToCheck,
                 type: type
             }, session.accessToken, lang);
@@ -52,50 +54,17 @@ export default function Synonyms({hasKey}: { hasKey: boolean }): JSX.Element {
             setInProgress(false);
         }
     }
-    
+
     if (!hasKey) {
-        return (
-            <div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm">
-                <div className="flex-1 p-6 overflow-y-auto flex items-center justify-center">
-                    <div className="max-w-md mx-auto">
-                        <div
-                            className="bg-tertiary/90 backdrop-blur-sm border border-secondary/50 rounded-2xl p-8 text-center shadow-2xl">
-                            <div
-                                className="w-20 h-20 mx-auto mb-6 bg-primary rounded-2xl flex items-center justify-center shadow-lg">
-                                <FontAwesomeIcon icon={faLock} className="w-10 h-10 text-text-primary"/>
-                            </div>
-                            
-                            <h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-4">
-                                Accès requis
-                            </h3>
-                            
-                            <p className="text-muted leading-relaxed text-lg">
-                                Un abonnement de niveau de base de QuillSense ou une clé API OpenAI est requis pour
-                                activer le dictionnaire intelligent.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
+        return <LockCard title={t('synonyms.locked.title')}
+                         description={t('synonyms.locked.description')}/>;
     }
-    
+
     return (
-        <div className="flex flex-col h-full bg-secondary/20 backdrop-blur-sm overflow-hidden">
-            <div className="p-5 border-b border-secondary/50 bg-secondary/30 shadow-sm">
+        <div className="flex flex-col h-full overflow-hidden">
+            <div className="p-5 bg-darkest-background">
                 <div className="mb-3">
-                    <div className="flex items-center gap-3 mb-4">
-                        <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center shadow-sm">
-                            <FontAwesomeIcon icon={faExchangeAlt} className="text-primary w-6 h-6"/>
-                        </div>
-                        <div>
-                            <h3 className="text-xl font-['ADLaM_Display'] text-text-primary">{t("synonyms.heading")}</h3>
-                            <p className="text-sm text-muted">{t("synonyms.subheading")}</p>
-                        </div>
-                    </div>
-                    
-                    <div className="mb-3">
-                        <SearchInputWithSelect
+                    <SearchInputWithSelect
                             selectValue={type}
                             setSelectValue={setType}
                             selectOptions={[
@@ -105,74 +74,53 @@ export default function Synonyms({hasKey}: { hasKey: boolean }): JSX.Element {
                             inputValue={wordToCheck}
                             setInputValue={setWordToCheck}
                             inputPlaceholder={t("synonyms.inputPlaceholder")}
-                            searchIcon={faSearch}
+                            searchIcon={Search}
                             onSearch={handleSearch}
-                            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                            onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>): void => {
                                 if (e.key === 'Enter') {
                                     handleSearch();
                                 }
                             }}
                         />
-                    </div>
                 </div>
             </div>
             
             <div className="flex-1 overflow-y-auto p-4">
                 {inProgress && (
-                    <div className="flex items-center justify-center h-32">
-                        <div className="animate-pulse flex flex-col items-center">
-                            <div
-                                className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-3"></div>
-                            <p className="text-text-secondary">{t("synonyms.loading")}</p>
-                        </div>
-                    </div>
+                    <PulseLoader text={t("synonyms.loading")}/>
                 )}
                 
                 {!inProgress && aiResponse && aiResponse.words.length > 0 && (
-                    <div
-                        className="rounded-xl bg-tertiary/90 backdrop-blur-sm shadow-lg overflow-hidden border border-secondary/50">
-                        <div className="bg-primary/10 p-4 border-b border-secondary/30">
-                            <h3 className="text-xl font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
-                                <FontAwesomeIcon icon={faExchangeAlt} className="text-primary w-6 h-6"/>
-                                <span>
-                                    {type === 'synonymes'
-                                        ? t("synonyms.resultSynonyms", {word: wordToCheck})
-                                        : t("synonyms.resultAntonyms", {word: wordToCheck})}
-                                </span>
-                            </h3>
-                        </div>
+                    <div className="space-y-4">
+                        <h3 className="text-lg font-['ADLaM_Display'] text-text-primary flex items-center gap-2">
+                            <ArrowLeftRight className="text-primary w-5 h-5" strokeWidth={1.75}/>
+                            <span>
+                                {type === 'synonymes'
+                                    ? t("synonyms.resultSynonyms", {word: wordToCheck})
+                                    : t("synonyms.resultAntonyms", {word: wordToCheck})}
+                            </span>
+                        </h3>
                         
-                        <div className="p-5">
-                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                                {aiResponse.words.map((item: SynonymAI, index: number) => (
-                                    <div key={index}
-                                         className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 hover:border-primary/50 hover:shadow-md hover:scale-102 transition-all duration-200">
-                                        <div className="font-semibold text-primary mb-1.5">{item.word}</div>
-                                        <div className="text-sm text-muted leading-relaxed">{item.context}</div>
-                                    </div>
-                                ))}
-                            </div>
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                            {aiResponse.words.map((item: SynonymAI, index: number): React.JSX.Element => (
+                                <div key={index}
+                                     className="bg-tertiary rounded-xl p-4 hover:bg-secondary transition-colors duration-150">
+                                    <div className="font-semibold text-primary text-sm mb-1.5">{item.word}</div>
+                                    <div className="text-xs text-muted leading-relaxed">{item.context}</div>
+                                </div>
+                            ))}
                         </div>
                     </div>
                 )}
-                
+
                 {!inProgress && (!aiResponse || aiResponse.words.length === 0) && (
-                    <div className="h-full flex flex-col items-center justify-center text-center p-8">
-                        <div
-                            className="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 shadow-md">
-                            <FontAwesomeIcon icon={faExchangeAlt} className="w-10 h-10 text-primary"/>
-                        </div>
-                        <h3 className="text-xl font-['ADLaM_Display'] text-text-primary mb-3">
-                            {type === 'synonymes' ? t("synonyms.emptySynonymsTitle") : t("synonyms.emptyAntonymsTitle")}
-                        </h3>
-                        <p className="text-muted max-w-md text-lg leading-relaxed">
-                            {type === 'synonymes'
-                                ? t("synonyms.emptySynonymsDescription")
-                                : t("synonyms.emptyAntonymsDescription")}
-                        </p>
-                    </div>
+                    <EmptyState
+                        icon={ArrowLeftRight}
+                        title={type === 'synonymes' ? t("synonyms.emptySynonymsTitle") : t("synonyms.emptyAntonymsTitle")}
+                        description={type === 'synonymes' ? t("synonyms.emptySynonymsDescription") : t("synonyms.emptyAntonymsDescription")}
+                    />
                 )}
             </div>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/components/rightbar/AboutERitors.tsx b/components/rightbar/AboutERitors.tsx
index 131e607..716f633 100644
--- a/components/rightbar/AboutERitors.tsx
+++ b/components/rightbar/AboutERitors.tsx
@@ -1,9 +1,11 @@
 'use client';
-import {useEffect, useRef} from "react";
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faCode, faCopyright, faInfo, faLaptopCode, faTag, faX} from "@fortawesome/free-solid-svg-icons";
+import React from "react";
+import {Code2, Copyright, Info, Laptop, Tag} from 'lucide-react';
 import {configs} from "@/lib/configs";
-import {useTranslations} from "next-intl";
+import {useTranslations} from '@/lib/i18n';
+import Modal from "@/components/ui/Modal";
+import DetailField from "@/components/ui/DetailField";
+import Badge from "@/components/ui/Badge";
 
 interface AboutEditorsProps {
     onClose: () => void;
@@ -11,15 +13,7 @@ interface AboutEditorsProps {
 
 export default function AboutEditors({onClose}: AboutEditorsProps) {
     const t = useTranslations();
-    const modalRef: React.RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
-    
-    useEffect((): () => void => {
-        document.body.style.overflow = 'hidden';
-        return (): void => {
-            document.body.style.overflow = 'auto';
-        };
-    }, []);
-    
+
     const appInfo = {
         name: configs.appName,
         version: configs.appVersion,
@@ -30,83 +24,43 @@ export default function AboutEditors({onClose}: AboutEditorsProps) {
             "TypeScript", "NextJS", "NodeJS", "Fastify", "TailwindCSS", "TipTap"
         ]
     };
-    
-    return (
-        <div className="fixed inset-0 flex items-center justify-center bg-overlay z-50 backdrop-blur-sm">
-            <div ref={modalRef}
-                 className="bg-tertiary/90 backdrop-blur-sm text-text-primary rounded-2xl border border-secondary/50 shadow-2xl md:w-3/4 xl:w-1/4 lg:w-2/4 sm:w-11/12 max-h-[85vh] flex flex-col">
-                <div className="flex justify-between items-center bg-primary px-5 py-4 rounded-t-2xl shadow-md">
-                    <h2 className="font-['ADLaM_Display'] text-xl text-text-primary">
-                        {t("aboutEditors.title")}
-                    </h2>
-                    <button
-                        className="text-text-primary hover:text-text-primary p-2 rounded-xl hover:bg-text-primary/10 transition-all duration-200 hover:scale-110"
-                        onClick={onClose}>
-                        <FontAwesomeIcon icon={faX} className={'w-5 h-5'}/>
-                    </button>
-                </div>
-                
-                <div className="p-5 overflow-y-auto flex-grow custom-scrollbar">
-                    <div className="flex flex-col items-center mb-6">
-                        <h3 className="text-2xl font-['ADLaM_Display'] text-primary">{appInfo.name}</h3>
-                    </div>
 
-                    <div className="space-y-4">
-                        <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
-                            <div className="flex items-center mb-2">
-                                <FontAwesomeIcon icon={faTag} className="text-primary mr-2 w-5 h-5"/>
-                                <h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.version")}</h4>
-                            </div>
-                            <p className="text-muted ml-7">{appInfo.version}</p>
-                        </div>
-                        
-                        <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
-                            <div className="flex items-center mb-2">
-                                <FontAwesomeIcon icon={faCopyright} className="text-primary mr-2 w-5 h-5"/>
-                                <h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.copyrightLabel")}</h4>
-                            </div>
-                            <p className="text-muted ml-7">{appInfo.copyright}</p>
-                        </div>
-                        
-                        <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
-                            <div className="flex items-center mb-2">
-                                <FontAwesomeIcon icon={faInfo} className="text-primary mr-2 w-5 h-5"/>
-                                <h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.descriptionLabel")}</h4>
-                            </div>
-                            <p className="text-muted ml-7 leading-relaxed">{appInfo.description}</p>
-                        </div>
-                        
-                        <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
-                            <div className="flex items-center mb-2">
-                                <FontAwesomeIcon icon={faLaptopCode} className="text-primary mr-2 w-5 h-5"/>
-                                <h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.teamLabel")}</h4>
-                            </div>
-                            <ul className="text-muted ml-7">
-                                {appInfo.developers.map((dev: string, index: number) => (
-                                    <li key={index}>{dev}</li>
-                                ))}
-                            </ul>
-                        </div>
-                        
-                        <div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
-                            <div className="flex items-center mb-2">
-                                <FontAwesomeIcon icon={faCode} className="text-primary mr-2 w-5 h-5"/>
-                                <h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.techLabel")}</h4>
-                            </div>
-                            <div className="flex flex-wrap gap-2 ml-7">
-                                {appInfo.technologies.map((tech, index) => (
-                                    <span
-                                        key={index}
-                                        className="bg-primary/20 text-primary px-2.5 py-1 rounded-lg text-sm font-medium border border-primary/30"
-                                    >
-                                        {tech}
-                                    </span>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
+    return (
+        <Modal icon={Info} title={t("aboutEditors.title")} onClose={onClose} size="sm">
+            <div className="flex flex-col items-center mb-2">
+                <h3 className="text-2xl font-['ADLaM_Display'] text-primary">{appInfo.name}</h3>
+            </div>
+            
+            <DetailField icon={Tag} label={t("aboutEditors.version")} value={appInfo.version}
+                         preserveWhitespace={false}/>
+            <DetailField icon={Copyright} label={t("aboutEditors.copyrightLabel")} value={appInfo.copyright}
+                         preserveWhitespace={false}/>
+            <DetailField icon={Info} label={t("aboutEditors.descriptionLabel")} value={appInfo.description}
+                         preserveWhitespace={false}/>
+            
+            <div className="p-5 bg-secondary rounded-xl">
+                <div className="flex items-center gap-2 mb-3">
+                    <Laptop className="w-4 h-4 text-primary" strokeWidth={1.75}/>
+                    <h3 className="text-text-primary font-semibold">{t("aboutEditors.teamLabel")}</h3>
+                </div>
+                <ul className="text-text-primary">
+                    {appInfo.developers.map((dev: string, index: number) => (
+                        <li key={index}>{dev}</li>
+                    ))}
+                </ul>
+            </div>
+            
+            <div className="p-5 bg-secondary rounded-xl">
+                <div className="flex items-center gap-2 mb-3">
+                    <Code2 className="w-4 h-4 text-primary" strokeWidth={1.75}/>
+                    <h3 className="text-text-primary font-semibold">{t("aboutEditors.techLabel")}</h3>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                    {appInfo.technologies.map((tech: string, index: number) => (
+                        <Badge key={index} variant="primary" size="md">{tech}</Badge>
+                    ))}
                 </div>
             </div>
-        </div>
+        </Modal>
     );
-}
\ No newline at end of file
+}
diff --git a/components/rightbar/ComposerRightBar.tsx b/components/rightbar/ComposerRightBar.tsx
index 626048b..15707df 100644
--- a/components/rightbar/ComposerRightBar.tsx
+++ b/components/rightbar/ComposerRightBar.tsx
@@ -1,24 +1,15 @@
 'use client'
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {
-    faFeather,
-    faGlobe,
-    faHatWizard,
-    faInfoCircle,
-    faMapMarkerAlt,
-    faUsers
-} from "@fortawesome/free-solid-svg-icons";
+import {ExternalLink, Feather, Globe, Info, MapPin, MessageCircle, Users, Wand2, X} from 'lucide-react';
 import React, {lazy, Suspense, useContext, useEffect, useState} from "react";
-import {BookContext} from "@/context/BookContext";
-import {PanelComponent} from "@/lib/models/Editor";
-import PanelHeader from "@/components/PanelHeader";
+import {BookContext, BookContextProps} from "@/context/BookContext";
+import {PanelComponent} from "@/lib/types/editor";
+import SectionHeader from "@/components/ui/SectionHeader";
 import AboutEditors from "@/components/rightbar/AboutERitors";
-import {faDiscord, faFacebook} from "@fortawesome/free-brands-svg-icons";
 import QuillSense from "@/components/quillsense/QuillSenseComponent";
-import {useTranslations} from "next-intl";
-import {faSpinner} from "@fortawesome/free-solid-svg-icons";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import * as tauri from '@/lib/tauri';
+import {useTranslations} from '@/lib/i18n';
+import PulseLoader from '@/components/ui/PulseLoader';
+import InsetPanel from "@/components/ui/InsetPanel";
+import IconButton from "@/components/ui/IconButton";
 
 // Lazy loaded Editor components
 const WorldEditor = lazy(function () {
@@ -34,21 +25,13 @@ const SpellEditor = lazy(function () {
     return import('@/components/book/settings/spells/editor/SpellEditor');
 });
 
-function LoadingSpinner(): React.JSX.Element {
-    return (
-        <div className="flex items-center justify-center py-12">
-            <FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
-        </div>
-    );
-}
-
 interface PanelContentProps {
     currentPanelId: number | undefined;
 }
 
 function PanelContent({currentPanelId}: PanelContentProps): React.JSX.Element {
     return (
-        <Suspense fallback={<LoadingSpinner/>}>
+        <Suspense fallback={<PulseLoader/>}>
             {currentPanelId === 1 && <QuillSense/>}
             {currentPanelId === 2 && <WorldEditor/>}
             {currentPanelId === 3 && <LocationEditor/>}
@@ -58,27 +41,11 @@ function PanelContent({currentPanelId}: PanelContentProps): React.JSX.Element {
     );
 }
 
-interface PanelHeaderProps {
-    currentPanel: PanelComponent | undefined;
-    onClose: () => Promise<void>;
-}
 
-function EditorPanelHeader({currentPanel, onClose}: PanelHeaderProps): React.JSX.Element {
-    return (
-        <PanelHeader
-            title={currentPanel?.title ?? ''}
-            description={currentPanel?.description ?? ''}
-            badge={currentPanel?.badge ?? ''}
-            icon={currentPanel?.icon}
-            callBackAction={onClose}
-        />
-    );
-}
 
 export default function ComposerRightBar(): React.JSX.Element {
-    const {book} = useContext(BookContext);
+    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
     const t = useTranslations();
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
 
     const [panelHidden, setPanelHidden] = useState<boolean>(false);
     const [currentPanel, setCurrentPanel] = useState<PanelComponent | undefined>();
@@ -101,35 +68,35 @@ export default function ComposerRightBar(): React.JSX.Element {
             title: t("composerRightBar.editorComponents.quillSense.title"),
             description: t("composerRightBar.editorComponents.quillSense.description"),
             badge: t("composerRightBar.editorComponents.quillSense.badge"),
-            icon: faFeather
+            icon: Feather
         },
         {
             id: 2,
             title: t("composerRightBar.editorComponents.worlds.title"),
             description: t("composerRightBar.editorComponents.worlds.description"),
             badge: t("composerRightBar.editorComponents.worlds.badge"),
-            icon: faGlobe
+            icon: Globe
         },
         {
             id: 3,
             title: t("composerRightBar.editorComponents.locations.title"),
             description: t("composerRightBar.editorComponents.locations.description"),
             badge: t("composerRightBar.editorComponents.locations.badge"),
-            icon: faMapMarkerAlt
+            icon: MapPin
         },
         {
             id: 4,
             title: t("composerRightBar.editorComponents.characters.title"),
             description: t("composerRightBar.editorComponents.characters.description"),
             badge: t("composerRightBar.editorComponents.characters.badge"),
-            icon: faUsers
+            icon: Users
         },
         {
             id: 5,
             title: t("composerRightBar.editorComponents.spells.title"),
             description: t("composerRightBar.editorComponents.spells.description"),
             badge: t("composerRightBar.editorComponents.spells.badge"),
-            icon: faHatWizard
+            icon: Wand2
         },
     ];
 
@@ -139,7 +106,7 @@ export default function ComposerRightBar(): React.JSX.Element {
             title: t("composerRightBar.homeComponents.about.title"),
             description: t("composerRightBar.homeComponents.about.description"),
             badge: t("composerRightBar.homeComponents.about.badge"),
-            icon: faInfoCircle,
+            icon: Info,
             action: function (): void {
                 setShowAbout(true);
             }
@@ -149,9 +116,9 @@ export default function ComposerRightBar(): React.JSX.Element {
             title: t("composerRightBar.homeComponents.facebook.title"),
             description: t("composerRightBar.homeComponents.facebook.description"),
             badge: t("composerRightBar.homeComponents.facebook.badge"),
-            icon: faFacebook,
-            action: function (): Promise<void> {
-                return tauri.openExternal('https://www.facebook.com/profile.php?id=61562628720878');
+            icon: ExternalLink,
+            action: function (): void {
+                window.open('https://www.facebook.com/profile.php?id=61562628720878', '_blank');
             }
         },
         {
@@ -159,9 +126,9 @@ export default function ComposerRightBar(): React.JSX.Element {
             title: t("composerRightBar.homeComponents.discord.title"),
             description: t("composerRightBar.homeComponents.discord.description"),
             badge: t("composerRightBar.homeComponents.discord.badge"),
-            icon: faDiscord,
-            action: function (): Promise<void> {
-                return tauri.openExternal('https://discord.gg/CHXRPvmaXm');
+            icon: MessageCircle,
+            action: function (): void {
+                window.open('https://discord.gg/CHXRPvmaXm', '_blank');
             }
         }
     ];
@@ -180,89 +147,72 @@ export default function ComposerRightBar(): React.JSX.Element {
     async function handleClosePanel(): Promise<void> {
         setPanelHidden(!panelHidden);
     }
+    
 
     return (
         <div id="right-panel-container" className="flex transition-all duration-300">
             {panelHidden && (
                 <div id="right-panel"
-                     className="bg-tertiary/95 backdrop-blur-sm border-l border-secondary/50 min-w-[450px] max-w-[450px] h-full transition-all duration-300 overflow-hidden shadow-2xl">
-                    <div className="flex flex-col h-full">
-                        <EditorPanelHeader
-                            currentPanel={currentPanel}
-                            onClose={handleClosePanel}
-                        />
-                        <div className="flex-grow overflow-auto">
+                     className="bg-tertiary min-w-[450px] max-w-[450px] h-full transition-all duration-300 flex flex-col">
+                    <InsetPanel>
+                        <div className="p-4">
+                            <SectionHeader title={currentPanel?.title ?? ''}
+                                           icon={currentPanel?.icon}
+                                           actions={<IconButton icon={X} variant="ghost"
+                                                                onClick={handleClosePanel}/>}/>
+                        </div>
+                        <div className="flex-1 overflow-auto">
                             <PanelContent currentPanelId={currentPanel?.id}/>
                         </div>
-                    </div>
+                    </InsetPanel>
                 </div>
             )}
-            <div className="bg-tertiary border-l border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
+            <div className="bg-tertiary p-1 flex flex-col space-y-2">
                 {book ? editorComponents.filter(function (component: PanelComponent): boolean {
-                    // Masquer QuillSense (id=1) si offline, livre local ou desactive pour ce livre
-                    if (component.id === 1) {
-                        if (isCurrentlyOffline() || book?.localBook) {
-                            return false;
-                        }
-                        if (book.quillsenseEnabled === false) {
-                            return false;
-                        }
+                    if (component.id === 1 && book.quillsenseEnabled === false) {
+                        return false;
                     }
-                    // Masquer Worlds (id=2) si desactive pour ce livre
                     if (component.id === 2 && !book?.tools?.worlds) {
                         return false;
                     }
-                    // Masquer Locations (id=3) si desactive pour ce livre
                     if (component.id === 3 && !book?.tools?.locations) {
                         return false;
                     }
-                    // Masquer Characters (id=4) si desactive pour ce livre
                     if (component.id === 4 && !book?.tools?.characters) {
                         return false;
                     }
-                    // Masquer Spells (id=5) si desactive pour ce livre
                     if (component.id === 5 && !book?.tools?.spells) {
                         return false;
                     }
                     return true;
                 }).map(function (component: PanelComponent) {
                     return (
-                        <button
+                        <IconButton
                             key={component.id}
+                            icon={component.icon}
+                            variant="ghost"
+                            shape="square"
+                            tooltip={component.title}
                             disabled={disabled(component.id)}
+                            selected={panelHidden && currentPanel?.id === component.id}
                             onClick={function (): void {
                                 togglePanel(component);
                                 setCurrentPanel(component);
                             }}
-                            className={`group relative p-3 rounded-xl transition-all duration-200 ${
-                                disabled(component.id)
-                                    ? 'bg-secondary/10 text-muted cursor-not-allowed opacity-40'
-                                    : panelHidden && currentPanel?.id === component.id
-                                        ? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
-                                        : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'
-                            }`}
-                            title={component.title}
-                        >
-                            <FontAwesomeIcon icon={component.icon}
-                                             className="w-4 h-4 transition-transform duration-200 group-hover:scale-110"/>
-                            {panelHidden && currentPanel?.id === component.id && (
-                                <div className="absolute -left-1 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-r-full"></div>
-                            )}
-                        </button>
+                        />
                     );
                 }) : homeComponents.map(function (component: PanelComponent) {
                     return (
-                        <button
+                        <IconButton
                             key={component.id}
-                            onClick={component.action ?? function (): void {}}
-                            className={`group relative p-3 rounded-xl transition-all duration-200 ${panelHidden && currentPanel?.id === component.id
-                                ? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
-                                : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'}`}
-                            title={component.title}
-                        >
-                            <FontAwesomeIcon icon={component.icon}
-                                             className="w-4 h-4 transition-transform duration-200 group-hover:scale-110"/>
-                        </button>
+                            icon={component.icon}
+                            variant="ghost"
+                            shape="square"
+                            tooltip={component.title}
+                            selected={panelHidden && currentPanel?.id === component.id}
+                            onClick={component.action ?? function (): void {
+                            }}
+                        />
                     );
                 })}
             </div>
diff --git a/components/series/AddNewSeriesForm.tsx b/components/series/AddNewSeriesForm.tsx
index 72ae0fd..e99b346 100644
--- a/components/series/AddNewSeriesForm.tsx
+++ b/components/series/AddNewSeriesForm.tsx
@@ -1,23 +1,18 @@
 'use client';
-import React, {ChangeEvent, Dispatch, SetStateAction, useContext, useEffect, useRef, useState} from "react";
-import {AlertContext} from "@/context/AlertContext";
-import System from "@/lib/models/System";
-import {SessionContext} from "@/context/SessionContext";
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faBook, faCheck, faLayerGroup, faPencilAlt, faX} from "@fortawesome/free-solid-svg-icons";
+import React, {ChangeEvent, Dispatch, SetStateAction, useContext, useState} from "react";
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {apiPost} from '@/lib/api/client';
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {Book, Check, Layers, Pencil} from 'lucide-react';
 import InputField from "@/components/form/InputField";
 import TextInput from "@/components/form/TextInput";
-import TexteAreaInput from "@/components/form/TexteAreaInput";
-import CancelButton from "@/components/form/CancelButton";
-import SubmitButtonWLoading from "@/components/form/SubmitButtonWLoading";
-import {useTranslations} from "next-intl";
+import TextAreaInput from "@/components/form/TextAreaInput";
+import Button from "@/components/ui/Button";
+import Modal from "@/components/ui/Modal";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
 import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {SeriesSyncContext, SeriesSyncContextProps} from "@/context/SeriesSyncContext";
-import {SyncedSeries, SyncedSeriesBook} from "@/lib/models/SyncedSeries";
-import * as tauri from '@/lib/tauri';
+import {SyncedBook} from "@/lib/types/synced-book";
 
 interface AddNewSeriesFormProps {
     setCloseForm: Dispatch<SetStateAction<boolean>>;
@@ -26,36 +21,20 @@ interface AddNewSeriesFormProps {
 
 export default function AddNewSeriesForm({setCloseForm, onSeriesCreated}: AddNewSeriesFormProps) {
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {session} = useContext(SessionContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {serverSyncedBooks, setServerSyncedBooks, localSyncedBooks, setLocalSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {serverSyncedSeries, localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
-
-    // Get all bookIds already in a series
-    const booksAlreadyInSeries: Set<string> = new Set(
-        (isCurrentlyOffline() ? localSyncedSeries : serverSyncedSeries)
-            .flatMap((series: SyncedSeries): string[] =>
-                series.books.map((book: SyncedSeriesBook): string => book.bookId)
-            )
-    );
-    const modalRef: React.RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
-
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {
+        serverSyncedBooks,
+        setServerSyncedBooks
+    }: BooksSyncContextProps = useContext<BooksSyncContextProps>(BooksSyncContext);
     const [name, setName] = useState<string>('');
     const [description, setDescription] = useState<string>('');
     const [selectedBookIds, setSelectedBookIds] = useState<string[]>([]);
     const [isAddingSeries, setIsAddingSeries] = useState<boolean>(false);
-
+    
     const token: string = session?.accessToken ?? '';
-
-    useEffect((): () => void => {
-        document.body.style.overflow = 'hidden';
-        return (): void => {
-            document.body.style.overflow = 'auto';
-        };
-    }, []);
-
+    
     function toggleBookSelection(bookId: string): void {
         setSelectedBookIds((prev: string[]): string[] => {
             if (prev.includes(bookId)) {
@@ -64,7 +43,7 @@ export default function AddNewSeriesForm({setCloseForm, onSeriesCreated}: AddNew
             return [...prev, bookId];
         });
     }
-
+    
     async function handleAddSeries(): Promise<void> {
         if (!name) {
             errorMessage(t('addNewSeriesForm.error.nameMissing'));
@@ -78,54 +57,36 @@ export default function AddNewSeriesForm({setCloseForm, onSeriesCreated}: AddNew
             errorMessage(t('addNewSeriesForm.error.nameTooLong'));
             return;
         }
-
+        
         setIsAddingSeries(true);
         try {
-            const createData = {
-                name: name,
-                description: description || null,
-                bookIds: selectedBookIds,
-            };
-            let response: string;
-
-            if (isCurrentlyOffline()) {
-                response = await tauri.createSeries(createData);
-            } else {
-                response = await System.authPostToServer<string>(
-                    'series/add',
-                    createData,
-                    token,
-                    lang
-                );
-            }
-
+            const response: string = await apiPost<string>(
+                'series/add',
+                {
+                    name: name,
+                    description: description || null,
+                    bookIds: selectedBookIds,
+                },
+                token,
+                lang
+            );
             if (!response) {
                 errorMessage(t('addNewSeriesForm.error.addingSeries'));
                 setIsAddingSeries(false);
                 return;
             }
             successMessage(t('addNewSeriesForm.success'));
-
+            
             if (selectedBookIds.length > 0) {
-                if (isCurrentlyOffline()) {
-                    setLocalSyncedBooks((prev: SyncedBook[]): SyncedBook[] =>
-                        prev.map((book: SyncedBook): SyncedBook =>
-                            selectedBookIds.includes(book.id)
-                                ? {...book, seriesId: response}
-                                : book
-                        )
-                    );
-                } else {
-                    setServerSyncedBooks((prev: SyncedBook[]): SyncedBook[] =>
-                        prev.map((book: SyncedBook): SyncedBook =>
-                            selectedBookIds.includes(book.id)
-                                ? {...book, seriesId: response}
-                                : book
-                        )
-                    );
-                }
+                setServerSyncedBooks((prev: SyncedBook[]): SyncedBook[] =>
+                    prev.map((book: SyncedBook): SyncedBook =>
+                        selectedBookIds.includes(book.id)
+                            ? {...book, seriesId: response}
+                            : book
+                    )
+                );
             }
-
+            
             if (onSeriesCreated) {
                 onSeriesCreated(response, name);
             }
@@ -140,120 +101,100 @@ export default function AddNewSeriesForm({setCloseForm, onSeriesCreated}: AddNew
             setIsAddingSeries(false);
         }
     }
-
+    
     return (
-        <div
-            className="fixed inset-0 flex items-center justify-center bg-black/60 z-50 backdrop-blur-md animate-fadeIn">
-            <div ref={modalRef}
-                 className="bg-tertiary/95 backdrop-blur-sm text-text-primary rounded-2xl border border-secondary/50 shadow-2xl md:w-3/4 xl:w-2/5 lg:w-2/4 sm:w-11/12 max-h-[85vh] flex flex-col">
-                <div className="flex justify-between items-center bg-primary px-6 py-4 rounded-t-2xl shadow-lg">
-                    <h2 className="flex items-center gap-3 font-['ADLaM_Display'] text-2xl text-text-primary">
-                        <FontAwesomeIcon icon={faLayerGroup} className="w-6 h-6"/>
-                        {t("addNewSeriesForm.title")}
-                    </h2>
-                    <button
-                        className="text-background hover:text-background w-10 h-10 rounded-xl hover:bg-white/20 transition-all duration-200 flex items-center justify-center hover:scale-110"
-                        onClick={(): void => setCloseForm(false)}
-                    >
-                        <FontAwesomeIcon icon={faX} className={'w-5 h-5'}/>
-                    </button>
+        <Modal
+            icon={Layers}
+            title={t("addNewSeriesForm.title")}
+            onClose={(): void => setCloseForm(false)}
+            size="md"
+            footer={
+                <>
+                    <Button variant="secondary" onClick={() => setCloseForm(false)}>{t("common.cancel")}</Button>
+                    <Button
+                        variant="primary"
+                        onClick={handleAddSeries}
+                        isLoading={isAddingSeries}
+                        loadingText={t("addNewSeriesForm.adding")}
+                        icon={Layers}
+                    >{t("addNewSeriesForm.add")}</Button>
+                </>
+            }
+        >
+            <InputField icon={Pencil} fieldName={t("addNewSeriesForm.name")} input={
+                <TextInput
+                    value={name}
+                    setValue={(e: ChangeEvent<HTMLInputElement>): void => setName(e.target.value)}
+                    placeholder={t("addNewSeriesForm.namePlaceholder")}
+                />
+            }/>
+            
+            <InputField
+                icon={Pencil}
+                fieldName={`${t("addNewSeriesForm.description")} (${t("addNewSeriesForm.optional")})`}
+                input={
+                    <TextAreaInput
+                        value={description}
+                        setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setDescription(e.target.value)}
+                        placeholder={t("addNewSeriesForm.descriptionPlaceholder")}
+                    />
+                }
+            />
+            
+            <div className="space-y-3">
+                <div className="flex items-center gap-2 text-text-primary">
+                    <Book className="w-4 h-4 text-primary" strokeWidth={1.75}/>
+                    <span className="font-medium">{t("addNewSeriesForm.selectBooks")}</span>
+                    {selectedBookIds.length > 0 && (
+                        <span className="text-sm text-muted">
+                            ({selectedBookIds.length} {t("addNewSeriesForm.selected")})
+                        </span>
+                    )}
                 </div>
-
-                <div className="p-5 overflow-y-auto flex-grow custom-scrollbar">
-                    <div className="space-y-6">
-                        <InputField icon={faPencilAlt} fieldName={t("addNewSeriesForm.name")} input={
-                            <TextInput
-                                value={name}
-                                setValue={(e: ChangeEvent<HTMLInputElement>): void => setName(e.target.value)}
-                                placeholder={t("addNewSeriesForm.namePlaceholder")}
-                            />
-                        }/>
-
-                        <InputField
-                            icon={faPencilAlt}
-                            fieldName={`${t("addNewSeriesForm.description")} (${t("addNewSeriesForm.optional")})`}
-                            input={
-                                <TexteAreaInput
-                                    value={description}
-                                    setValue={(e: ChangeEvent<HTMLTextAreaElement>): void => setDescription(e.target.value)}
-                                    placeholder={t("addNewSeriesForm.descriptionPlaceholder")}
-                                />
-                            }
-                        />
-
-                        <div className="space-y-3">
-                            <div className="flex items-center gap-2 text-text-primary">
-                                <FontAwesomeIcon icon={faBook} className="w-4 h-4 text-primary"/>
-                                <span className="font-medium">{t("addNewSeriesForm.selectBooks")}</span>
-                                {selectedBookIds.length > 0 && (
-                                    <span className="text-sm text-muted">
-                                        ({selectedBookIds.length} {t("addNewSeriesForm.selected")})
-                                    </span>
-                                )}
-                            </div>
-
-                            {(isCurrentlyOffline() ? localSyncedBooks : serverSyncedBooks)
-                                .filter((book: SyncedBook): boolean => !booksAlreadyInSeries.has(book.id)).length === 0 ? (
-                                <div className="text-center py-6 text-muted">
-                                    <FontAwesomeIcon icon={faBook} className="w-8 h-8 mb-2 opacity-50"/>
-                                    <p>{t("addNewSeriesForm.noBooks")}</p>
-                                </div>
-                            ) : (
-                                <div className="max-h-48 overflow-y-auto rounded-xl border border-secondary/50 bg-secondary/20">
-                                    {(isCurrentlyOffline() ? localSyncedBooks : serverSyncedBooks)
-                                        .filter((book: SyncedBook): boolean => !booksAlreadyInSeries.has(book.id))
-                                        .map((book: SyncedBook) => {
-                                        const isSelected: boolean = selectedBookIds.includes(book.id);
-                                        return (
-                                            <button
-                                                key={book.id}
-                                                type="button"
-                                                onClick={(): void => toggleBookSelection(book.id)}
-                                                className={`w-full flex items-center gap-3 px-4 py-3 transition-all duration-200 border-b border-secondary/30 last:border-b-0 ${
-                                                    isSelected
-                                                        ? 'bg-primary/20 hover:bg-primary/30'
-                                                        : 'hover:bg-secondary/50'
-                                                }`}
-                                            >
-                                                <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all ${
-                                                    isSelected
-                                                        ? 'bg-primary border-primary'
-                                                        : 'border-secondary/50'
-                                                }`}>
-                                                    {isSelected && (
-                                                        <FontAwesomeIcon icon={faCheck} className="w-3 h-3 text-white"/>
-                                                    )}
-                                                </div>
-                                                <div className="flex-1 text-left">
-                                                    <div className="text-text-primary font-medium">{book.title}</div>
-                                                    {book.subTitle && (
-                                                        <div className="text-sm text-muted">{book.subTitle}</div>
-                                                    )}
-                                                </div>
-                                            </button>
-                                        );
-                                    })}
-                                </div>
-                            )}
-                        </div>
+                
+                {serverSyncedBooks.length === 0 ? (
+                    <div className="text-center py-6 text-muted">
+                        <Book className="w-8 h-8 mb-2 opacity-50" strokeWidth={1.75}/>
+                        <p>{t("addNewSeriesForm.noBooks")}</p>
                     </div>
-                </div>
-
-                <div
-                    className="flex justify-between items-center p-5 border-t border-secondary/50 bg-secondary/20 rounded-b-2xl">
-                    <div></div>
-                    <div className="flex gap-3">
-                        <CancelButton callBackFunction={() => setCloseForm(false)}/>
-                        <SubmitButtonWLoading
-                            callBackAction={handleAddSeries}
-                            isLoading={isAddingSeries}
-                            text={t("addNewSeriesForm.add")}
-                            loadingText={t("addNewSeriesForm.adding")}
-                            icon={faLayerGroup}
-                        />
+                ) : (
+                    <div
+                        className="max-h-48 overflow-y-auto rounded-xl border border-secondary bg-tertiary">
+                        {serverSyncedBooks.map((book: SyncedBook) => {
+                            const isSelected: boolean = selectedBookIds.includes(book.id);
+                            return (
+                                <button
+                                    key={book.id}
+                                    type="button"
+                                    onClick={(): void => toggleBookSelection(book.id)}
+                                    className={`w-full flex items-center gap-3 px-4 py-3 transition-colors duration-150 border-b border-secondary last:border-b-0 ${
+                                        isSelected
+                                            ? 'bg-secondary'
+                                            : 'hover:bg-secondary/50'
+                                    }`}
+                                >
+                                    <div
+                                        className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
+                                            isSelected
+                                                ? 'bg-primary/20 border-primary'
+                                                : 'border-secondary'
+                                        }`}>
+                                        {isSelected && (
+                                            <Check className="w-3 h-3 text-text-primary" strokeWidth={1.75}/>
+                                        )}
+                                    </div>
+                                    <div className="flex-1 text-left">
+                                        <div className="text-text-primary font-medium">{book.title}</div>
+                                        {book.subTitle && (
+                                            <div className="text-sm text-muted">{book.subTitle}</div>
+                                        )}
+                                    </div>
+                                </button>
+                            );
+                        })}
                     </div>
-                </div>
+                )}
             </div>
-        </div>
+        </Modal>
     );
 }
diff --git a/components/series/SeriesCard.tsx b/components/series/SeriesCard.tsx
index 4405cce..e3bd110 100644
--- a/components/series/SeriesCard.tsx
+++ b/components/series/SeriesCard.tsx
@@ -1,13 +1,11 @@
 'use client';
 import React, {useState} from "react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faCog, faLayerGroup} from "@fortawesome/free-solid-svg-icons";
-import {BookProps} from "@/lib/models/Book";
+import {Layers, Settings} from 'lucide-react';
+import IconButton from "@/components/ui/IconButton";
+import {BookProps} from "@/lib/types/book";
 import BookCard from "@/components/book/BookCard";
-import {useTranslations} from "next-intl";
-import {SyncType} from "@/context/BooksSyncContext";
-import {SeriesSyncType} from "@/context/SeriesSyncContext";
-import SyncSeries from "@/components/SyncSeries";
+import Badge from "@/components/ui/Badge";
+import {useTranslations} from '@/lib/i18n';
 
 export interface SeriesCardProps {
     id: string;
@@ -18,13 +16,11 @@ export interface SeriesCardProps {
 
 interface SeriesCardComponentProps {
     series: SeriesCardProps;
-    onBookClick: (bookId: string) => Promise<void>;
+    onBookClick: (bookId: string) => void;
     onSettingsClick: (seriesId: string) => void;
-    getSyncStatus?: (bookId: string) => SyncType;
-    seriesSyncStatus?: SeriesSyncType;
 }
 
-export default function SeriesCard({series, onBookClick, onSettingsClick, getSyncStatus, seriesSyncStatus = 'synced'}: SeriesCardComponentProps) {
+export default function SeriesCard({series, onBookClick, onSettingsClick}: SeriesCardComponentProps) {
     const t = useTranslations();
     const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
@@ -32,81 +28,58 @@ export default function SeriesCard({series, onBookClick, onSettingsClick, getSyn
         <div className="flex flex-shrink-0 p-2">
             <div
                 onClick={() => setIsExpanded(!isExpanded)}
-                className={`group bg-tertiary/90 backdrop-blur-sm shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-primary/50 hover:border-primary flex flex-col cursor-pointer flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 ${isExpanded ? 'rounded-l-2xl border-r-0' : 'rounded-2xl'}`}
+                className={`group relative aspect-[2/3] overflow-hidden cursor-pointer transition-all duration-300 hover:ring-1 hover:ring-text-primary/20 flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 ${isExpanded ? 'rounded-l-xl' : 'rounded-xl'}`}
             >
-                <div className="relative w-full aspect-[2/3] flex-shrink-0 overflow-hidden rounded-t-2xl">
-                    {series.coverImage ? (
-                        <img
-                            src={series.coverImage}
-                            alt={series.name}
-                            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110 opacity-80"
-                        />
-                    ) : (
-                        <div className="relative w-full h-full bg-gradient-to-br from-primary/30 via-primary/20 to-secondary flex items-center justify-center overflow-hidden">
-                            <div className="absolute inset-0 bg-primary/10"></div>
-                            <FontAwesomeIcon icon={faLayerGroup} className="text-primary w-16 h-16 opacity-60"/>
-                        </div>
-                    )}
-                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-tertiary via-tertiary/50 to-transparent h-24"></div>
-
-                    <div className="absolute top-3 right-3 flex items-center gap-2">
-                        <SyncSeries seriesId={series.id} status={seriesSyncStatus} />
-                        <div className="bg-primary text-white text-xs px-2 py-1 rounded-full font-bold shadow-lg">
-                            {series.books.length}
-                        </div>
-                    </div>
-                </div>
-
-                <div className="p-4 flex-1 flex flex-col justify-between">
-                    <div className="flex-1">
-                        <h3 className="text-text-primary text-center font-bold text-base mb-2 truncate group-hover:text-primary transition-colors tracking-wide">
-                            {series.name}
-                        </h3>
-                        <div className="flex items-center justify-center mb-3 h-5">
-                            <div className="h-px w-8 bg-primary/30"></div>
-                            <p className="text-muted text-center mx-2 text-xs italic truncate px-2">
-                                {series.books.length} {series.books.length > 1 ? t("seriesCard.books") : t("seriesCard.book")}
-                            </p>
-                            <div className="h-px w-8 bg-primary/30"></div>
-                        </div>
-                    </div>
-                    <div className="flex justify-center items-center pt-3 border-t border-primary/30">
-                        <span className="bg-primary/20 text-primary text-xs px-3 py-1 rounded-full font-medium border border-primary/30">
-                            {t("seriesCard.series")}
-                        </span>
+                {series.coverImage ? (
+                    <img
+                        src={series.coverImage}
+                        alt={series.name}
+                        className="w-full h-full object-cover"
+                    />
+                ) : (
+                    <div className="w-full h-full bg-secondary flex items-center justify-center">
+                        <Layers className="text-muted w-12 h-12" strokeWidth={1.75}/>
                     </div>
+                )}
+                
+                <div className="absolute inset-x-0 bottom-0 bg-darkest-background/70 p-3">
+                    <h3 className="text-text-primary font-bold text-sm truncate">
+                        {series.name}
+                    </h3>
+                    <p className="text-text-secondary text-xs mt-0.5">
+                        {series.books.length} {series.books.length > 1 ? t("seriesCard.books") : t("seriesCard.book")}
+                    </p>
                 </div>
+                
+                <Badge size="sm" floating>
+                    {series.books.length}
+                </Badge>
             </div>
 
-            <div className={`${isExpanded ? 'flex' : 'hidden'} items-center border-y-2 border-primary bg-primary/5`}>
-                {series.books.map((book: BookProps, idx: number) => (
-                    <div key={book.bookId} className="flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 p-2">
-                        <BookCard
-                            book={book}
-                            onClickCallback={onBookClick}
-                            index={idx}
-                            syncStatus={getSyncStatus ? getSyncStatus(book.bookId) : 'synced'}
-                        />
+            {isExpanded && (
+                <>
+                    <div className="flex items-center border-y border-secondary bg-tertiary">
+                        {series.books.map((book: BookProps, idx: number) => (
+                            <div key={book.bookId} className="flex-shrink-0 w-64 sm:w-52 md:w-48 lg:w-56 xl:w-64 p-2">
+                                <BookCard
+                                    book={book}
+                                    onClickCallback={onBookClick}
+                                    index={idx}
+                                />
+                            </div>
+                        ))}
+
+                        <div className="flex items-center px-4 flex-shrink-0">
+                            <IconButton icon={Settings} variant="ghost" size="lg" shape="square"
+                                        tooltip={t("seriesCard.settings")}
+                                        onClick={(): void => onSettingsClick(series.id)}/>
+                        </div>
                     </div>
-                ))}
-
-                {/* Bouton Settings */}
-                <div className="flex items-center px-4 flex-shrink-0">
-                    <button
-                        onClick={(event: React.MouseEvent) => {
-                            event.stopPropagation();
-                            onSettingsClick(series.id);
-                        }}
-                        className="p-4 rounded-xl bg-primary/20 hover:bg-primary text-primary hover:text-white transition-all duration-200 hover:scale-110 shadow-lg"
-                        title={t("seriesCard.settings")}
-                    >
-                        <FontAwesomeIcon icon={faCog} className="w-6 h-6"/>
-                    </button>
-                </div>
-            </div>
-
-            {/* Bordure de fin */}
-            <div className={`${isExpanded ? 'block' : 'hidden'} w-3 border-y-2 border-r-2 border-primary rounded-r-2xl bg-primary/5 flex-shrink-0`}></div>
+                    
+                    <div
+                        className="w-3 border-y border-r border-secondary rounded-r-xl bg-tertiary flex-shrink-0"></div>
+                </>
+            )}
         </div>
     );
 }
diff --git a/components/series/SeriesSetting.tsx b/components/series/SeriesSetting.tsx
index 204e1c5..7a8b3bb 100644
--- a/components/series/SeriesSetting.tsx
+++ b/components/series/SeriesSetting.tsx
@@ -3,21 +3,20 @@ import {useState} from "react";
 import SeriesSettingSidebar from "@/components/series/SeriesSettingSidebar";
 import SeriesSettingOption from "@/components/series/SeriesSettingOption";
 import {SeriesContext} from "@/context/SeriesContext";
-import {useTranslations} from "next-intl";
-import SettingsPanel from "@/components/SettingsPanel";
+import {useTranslations} from '@/lib/i18n';
+import SettingsPanel from "@/components/ui/SettingsPanel";
 
 interface SeriesSettingProps {
     seriesId: string;
-    localSeries: boolean;
     onClose: () => void;
 }
 
-export default function SeriesSetting({seriesId, localSeries, onClose}: SeriesSettingProps) {
+export default function SeriesSetting({seriesId, onClose}: SeriesSettingProps) {
     const t = useTranslations();
     const [currentSetting, setCurrentSetting] = useState<string>('basic-information');
-
+    
     return (
-        <SeriesContext.Provider value={{seriesId, localSeries}}>
+        <SeriesContext.Provider value={{seriesId}}>
             <SettingsPanel
                 title={t("bookList.seriesSettings")}
                 sidebar={
diff --git a/components/series/SeriesSettingOption.tsx b/components/series/SeriesSettingOption.tsx
index 8435777..c5b0b48 100644
--- a/components/series/SeriesSettingOption.tsx
+++ b/components/series/SeriesSettingOption.tsx
@@ -1,11 +1,12 @@
 'use client'
 import React, {lazy, Suspense, useContext, useRef} from 'react';
-import {faPen, faSave} from '@fortawesome/free-solid-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faSpinner} from '@fortawesome/free-solid-svg-icons';
-import {useTranslations} from 'next-intl';
-import PanelHeader from '@/components/PanelHeader';
-import {SeriesContext} from '@/context/SeriesContext';
+import {useTranslations} from '@/lib/i18n';
+import SectionHeader from "@/components/ui/SectionHeader";
+import IconButton from "@/components/ui/IconButton";
+import {Save} from 'lucide-react';
+import PulseLoader from '@/components/ui/PulseLoader';
+import {SeriesContext, SeriesContextProps} from '@/context/SeriesContext';
+import {SettingRef} from "@/lib/types/settings";
 
 // Lazy loaded components - avec ref (anciens)
 const BasicSeriesInformation = lazy(function () {
@@ -29,32 +30,20 @@ const SpellSettings = lazy(function () {
     return import('@/components/book/settings/spells/settings/SpellSettings');
 });
 
-function LoadingSpinner(): React.JSX.Element {
-    return (
-        <div className="flex items-center justify-center py-12">
-            <FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
-        </div>
-    );
-}
-
 interface SeriesSettingOptionProps {
     setting: string;
 }
 
-interface SettingRef {
-    handleSave: () => Promise<void>;
-}
-
 // Settings qui gèrent leur propre save (pas de bouton save parent)
 const selfManagedSettings: string[] = ['characters', 'spells', 'worlds', 'locations'];
 
 export default function SeriesSettingOption({setting}: SeriesSettingOptionProps): React.JSX.Element {
     const t = useTranslations();
-    const {seriesId} = useContext(SeriesContext);
-    const settingRef = useRef<SettingRef>(null);
-
+    const {seriesId}: SeriesContextProps = useContext<SeriesContextProps>(SeriesContext);
+    const settingRef: React.RefObject<SettingRef | null> = useRef<SettingRef>(null);
+    
     const showSaveButton: boolean = !selfManagedSettings.includes(setting);
-
+    
     function renderTitle(): string {
         switch (setting) {
             case 'basic-information':
@@ -73,41 +62,38 @@ export default function SeriesSettingOption({setting}: SeriesSettingOptionProps)
                 return "";
         }
     }
-
+    
     async function handleSaveClick(): Promise<void> {
         if (settingRef.current?.handleSave) {
             await settingRef.current.handleSave();
         }
     }
-
+    
     return (
         <div className="px-6">
-            <div className="sticky top-0 z-10 bg-tertiary pt-6 pb-4">
-                <PanelHeader
-                    icon={faPen}
-                    badge="SE"
+            <div className="sticky top-0 z-10 bg-darkest-background pt-6 pb-4">
+                <SectionHeader
                     title={renderTitle()}
-                    description=""
-                    secondActionCallback={showSaveButton ? handleSaveClick : undefined}
-                    callBackAction={showSaveButton ? handleSaveClick : undefined}
-                    secondActionIcon={showSaveButton ? faSave : undefined}
+                    actions={showSaveButton ? (
+                        <IconButton icon={Save} variant="primary" onClick={handleSaveClick}/>
+                    ) : undefined}
                 />
             </div>
-            <div className="bg-secondary/10 rounded-xl p-1 mb-6">
-                <Suspense fallback={<LoadingSpinner/>}>
+            <div className="mb-6">
+                <Suspense fallback={<PulseLoader/>}>
                     {setting === 'basic-information' && <BasicSeriesInformation ref={settingRef}/>}
                     {setting === 'books' && <SeriesBooksManager ref={settingRef}/>}
                     {setting === 'worlds' && (
-                        <WorldSettings entityType="series" entityId={seriesId} showToggle={false}/>
+                        <WorldSettings entityType="series" entityId={seriesId}/>
                     )}
                     {setting === 'locations' && (
-                        <LocationSettings entityType="series" entityId={seriesId} showToggle={false}/>
+                        <LocationSettings entityType="series" entityId={seriesId}/>
                     )}
                     {setting === 'characters' && (
-                        <CharacterSettings entityType="series" entityId={seriesId} showToggle={false}/>
+                        <CharacterSettings entityType="series" entityId={seriesId}/>
                     )}
                     {setting === 'spells' && (
-                        <SpellSettings entityType="series" entityId={seriesId} showToggle={false}/>
+                        <SpellSettings entityType="series" entityId={seriesId}/>
                     )}
                     {!['basic-information', 'books', 'worlds', 'locations', 'characters', 'spells'].includes(setting) && (
                         <div className="text-text-secondary py-4 text-center">
diff --git a/components/series/SeriesSettingSidebar.tsx b/components/series/SeriesSettingSidebar.tsx
index d60c991..e5e5ecb 100644
--- a/components/series/SeriesSettingSidebar.tsx
+++ b/components/series/SeriesSettingSidebar.tsx
@@ -1,34 +1,17 @@
 'use client'
-import Link from "next/link";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {
-    faBook,
-    faGlobe,
-    faHatWizard,
-    faMapMarkedAlt,
-    faPencilAlt,
-    faTrash,
-    faUser
-} from "@fortawesome/free-solid-svg-icons";
 import React, {Dispatch, SetStateAction, useContext, useState} from "react";
-import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
-import {useTranslations} from "next-intl";
-import AlertBox from "@/components/AlertBox";
-import {SessionContext} from "@/context/SessionContext";
+import {Book, Globe, LucideIcon, Map, Pencil, Trash2, User, Wand2} from 'lucide-react';
+import {useTranslations} from '@/lib/i18n';
+import AlertBox from "@/components/ui/AlertBox";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
 import {LangContext, LangContextProps} from "@/context/LangContext";
-import {AlertContext} from "@/context/AlertContext";
-import System from "@/lib/models/System";
-import {SeriesContext, SeriesContextProps} from "@/context/SeriesContext";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {SeriesSyncContext, SeriesSyncContextProps} from "@/context/SeriesSyncContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {SyncedSeries} from "@/lib/models/SyncedSeries";
-import * as tauri from '@/lib/tauri';
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {apiDelete} from '@/lib/api/client';
 
 interface SeriesSettingOption {
     id: string;
     name: string;
-    icon: IconDefinition;
+    icon: LucideIcon;
 }
 
 interface SeriesSettingSidebarProps {
@@ -46,37 +29,21 @@ export default function SeriesSettingSidebar(
         onClose
     }: SeriesSettingSidebarProps) {
     const t = useTranslations();
-    const {session} = useContext(SessionContext);
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
     const userToken: string = session?.accessToken ? session?.accessToken : '';
-    const {localSeries} = useContext<SeriesContextProps>(SeriesContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
 
     const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
 
     async function handleDeleteSeries(): Promise<void> {
         try {
-            const deleteData = {seriesId: seriesId, deletedAt: System.timeStampInSeconds()};
-            let success: boolean;
-
-            if (isCurrentlyOffline() || localSeries) {
-                success = await tauri.deleteSeries(deleteData.seriesId, deleteData.deletedAt);
-            } else {
-                success = await System.authDeleteToServer<boolean>(
-                    'series/delete',
-                    deleteData,
-                    userToken,
-                    lang
-                );
-
-                if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                    addToQueue('delete_series', {data: deleteData});
-                }
-            }
-
+            const success: boolean = await apiDelete<boolean>(
+                'series/delete',
+                {seriesId: seriesId},
+                userToken,
+                lang
+            );
             if (success) {
                 successMessage(t('seriesSetting.deleteSuccess'));
                 onClose();
@@ -97,71 +64,50 @@ export default function SeriesSettingSidebar(
     }
 
     const settings: SeriesSettingOption[] = [
-        {
-            id: 'basic-information',
-            name: 'seriesSetting.basicInformation',
-            icon: faPencilAlt
-        },
-        {
-            id: 'books',
-            name: 'seriesSetting.books',
-            icon: faBook
-        },
-        {
-            id: 'characters',
-            name: 'seriesSetting.characters',
-            icon: faUser
-        },
-        {
-            id: 'worlds',
-            name: 'seriesSetting.worlds',
-            icon: faGlobe
-        },
-        {
-            id: 'locations',
-            name: 'seriesSetting.locations',
-            icon: faMapMarkedAlt
-        },
-        {
-            id: 'spells',
-            name: 'seriesSetting.spells',
-            icon: faHatWizard
-        }
+        {id: 'basic-information', name: 'seriesSetting.basicInformation', icon: Pencil},
+        {id: 'books', name: 'seriesSetting.books', icon: Book},
+        {id: 'characters', name: 'seriesSetting.characters', icon: User},
+        {id: 'worlds', name: 'seriesSetting.worlds', icon: Globe},
+        {id: 'locations', name: 'seriesSetting.locations', icon: Map},
+        {id: 'spells', name: 'seriesSetting.spells', icon: Wand2},
     ];
 
     return (
-        <div className="py-6 px-3 flex flex-col h-full">
-            <nav className="space-y-1 flex-1">
-                {
-                    settings.map((setting: SeriesSettingOption) => (
-                        <Link
+        <div className="py-4 px-2 flex flex-col h-full">
+            <nav className="space-y-0.5 flex-1">
+                {settings.map((setting: SeriesSettingOption) => {
+                    const Icon: LucideIcon = setting.icon;
+                    const isActive: boolean = selectedSetting === setting.id;
+                    return (
+                        <button
                             key={setting.id}
-                            href={''}
                             onClick={(): void => setSelectedSetting(setting.id)}
-                            className={`flex items-center text-base rounded-xl transition-all duration-200 ${
-                                selectedSetting === setting.id
-                                    ? 'bg-primary/20 text-text-primary border-l-4 border-primary font-semibold shadow-md scale-105'
-                                    : 'text-text-secondary hover:bg-secondary/50 hover:text-text-primary hover:scale-102'
-                            } p-3 mb-1`}>
-                            <FontAwesomeIcon
-                                icon={setting.icon}
-                                className={`mr-3 ${selectedSetting === setting.id ? 'text-primary w-5 h-5' : 'text-text-secondary w-5 h-5'}`}/>
+                            className={`flex items-center w-full text-sm rounded-lg transition-colors duration-150 px-3 py-2 ${
+                                isActive
+                                    ? 'bg-secondary text-text-primary font-medium'
+                                    : 'text-text-secondary hover:bg-secondary/50 hover:text-text-primary'
+                            }`}
+                        >
+                            <Icon
+                                className={`mr-2.5 w-4 h-4 flex-shrink-0 ${isActive ? 'text-primary' : 'text-muted'}`}
+                                strokeWidth={1.75}
+                            />
                             {t(setting.name)}
-                        </Link>
-                    ))
-                }
+                        </button>
+                    );
+                })}
             </nav>
-
-            <div className="mt-6 pt-4 border-t border-secondary/50">
+            
+            <div className="mt-4 pt-3 border-t border-secondary">
                 <button
                     onClick={(): void => setShowDeleteConfirm(true)}
-                    className="w-full flex items-center justify-center gap-2 p-3 text-red-400 hover:bg-red-500/20 rounded-xl transition-all duration-200"
+                    className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm text-accent-red hover:bg-accent-red/20 rounded-lg transition-colors duration-150"
                 >
-                    <FontAwesomeIcon icon={faTrash} className="w-4 h-4"/>
+                    <Trash2 className="w-4 h-4" strokeWidth={1.75}/>
                     {t('seriesSetting.deleteSeries')}
                 </button>
             </div>
-
+            
             {showDeleteConfirm && (
                 <AlertBox
                     title={t('seriesSetting.deleteSeries')}
diff --git a/components/series/settings/BasicSeriesInformation.tsx b/components/series/settings/BasicSeriesInformation.tsx
index eb6dc12..919164c 100644
--- a/components/series/settings/BasicSeriesInformation.tsx
+++ b/components/series/settings/BasicSeriesInformation.tsx
@@ -1,61 +1,45 @@
 'use client'
 import {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from "react";
-import System from "@/lib/models/System";
-import {AlertContext} from "@/context/AlertContext";
-import {SessionContext} from "@/context/SessionContext";
+import {apiGet, apiPut} from '@/lib/api/client';
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
 import TextInput from "@/components/form/TextInput";
-import TexteAreaInput from "@/components/form/TexteAreaInput";
+import TextAreaInput from "@/components/form/TextAreaInput";
 import InputField from "@/components/form/InputField";
-import {useTranslations} from "next-intl";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
 import {SeriesContext, SeriesContextProps} from "@/context/SeriesContext";
-import {SeriesDetailResponse, SeriesUpdateResponse} from "@/lib/models/Series";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faSpinner} from "@fortawesome/free-solid-svg-icons";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {SeriesSyncContext, SeriesSyncContextProps} from "@/context/SeriesSyncContext";
-import {SyncedSeries} from "@/lib/models/SyncedSeries";
-import * as tauri from '@/lib/tauri';
+import {SeriesDetailResponse, SeriesUpdateResponse} from "@/lib/types/series";
+import PulseLoader from '@/components/ui/PulseLoader';
 
 function BasicSeriesInformation(props: object, ref: React.Ref<{ handleSave: () => Promise<void> }>) {
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-
-    const {session} = useContext(SessionContext);
-    const {seriesId, localSeries} = useContext<SeriesContextProps>(SeriesContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {seriesId}: SeriesContextProps = useContext<SeriesContextProps>(SeriesContext);
     const userToken: string = session?.accessToken ? session?.accessToken : '';
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
-
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [name, setName] = useState<string>('');
     const [description, setDescription] = useState<string>('');
-
+    
     useEffect(function () {
         if (seriesId) {
             loadSeriesData();
         }
     }, [seriesId]);
-
+    
     async function loadSeriesData(): Promise<void> {
         setIsLoading(true);
         try {
-            let response: SeriesDetailResponse;
-
-            if (isCurrentlyOffline() || localSeries) {
-                response = await tauri.getSeriesDetail(seriesId);
-            } else {
-                response = await System.authGetQueryToServer<SeriesDetailResponse>(
-                    'series/detail',
-                    userToken,
-                    lang,
-                    {seriesid: seriesId}
-                );
-            }
-
+            const response: SeriesDetailResponse = await apiGet<SeriesDetailResponse>(
+                'series/detail',
+                userToken,
+                lang,
+                {seriesid: seriesId}
+            );
             if (response) {
                 setName(response.name);
                 setDescription(response.description || '');
@@ -70,43 +54,25 @@ function BasicSeriesInformation(props: object, ref: React.Ref<{ handleSave: () =
             setIsLoading(false);
         }
     }
-
+    
     useImperativeHandle(ref, function () {
         return {
             handleSave: handleSave
         };
     });
-
+    
     async function handleSave(): Promise<void> {
         if (!name) {
             errorMessage(t('seriesBasicInformation.error.nameRequired'));
             return;
         }
         try {
-            const updateData = {
+            const response: SeriesUpdateResponse = await apiPut<SeriesUpdateResponse>('series/update', {
                 seriesId: seriesId,
                 name: name,
                 description: description
-            };
-            let success: boolean;
-
-            if (isCurrentlyOffline() || localSeries) {
-                success = await tauri.updateSeries(updateData);
-            } else {
-                const response: SeriesUpdateResponse = await System.authPutToServer<SeriesUpdateResponse>(
-                    'series/update',
-                    updateData,
-                    userToken,
-                    lang
-                );
-                success = response.success;
-
-                if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                    addToQueue('update_series', {data: updateData});
-                }
-            }
-
-            if (!success) {
+            }, userToken, lang);
+            if (!response.success) {
                 errorMessage(t('seriesBasicInformation.error.update'));
                 return;
             }
@@ -119,32 +85,24 @@ function BasicSeriesInformation(props: object, ref: React.Ref<{ handleSave: () =
             }
         }
     }
-
+    
     if (isLoading) {
-        return (
-            <div className="flex items-center justify-center py-12">
-                <FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
-            </div>
-        );
+        return <PulseLoader/>;
     }
-
+    
     return (
         <div className="space-y-6">
-            <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                <InputField fieldName={t('seriesBasicInformation.fields.name')} input={<TextInput
-                    value={name}
-                    setValue={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
-                    placeholder={t('seriesBasicInformation.fields.namePlaceholder')}
-                />}/>
-            </div>
-
-            <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                <InputField fieldName={t('seriesBasicInformation.fields.description')} input={<TexteAreaInput
-                    value={description}
-                    setValue={(e: ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value)}
-                    placeholder={t('seriesBasicInformation.fields.descriptionPlaceholder')}
-                />}/>
-            </div>
+            <InputField fieldName={t('seriesBasicInformation.fields.name')} input={<TextInput
+                value={name}
+                setValue={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
+                placeholder={t('seriesBasicInformation.fields.namePlaceholder')}
+            />}/>
+            
+            <InputField fieldName={t('seriesBasicInformation.fields.description')} input={<TextAreaInput
+                value={description}
+                setValue={(e: ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value)}
+                placeholder={t('seriesBasicInformation.fields.descriptionPlaceholder')}
+            />}/>
         </div>
     );
 }
diff --git a/components/series/settings/SeriesBooksManager.tsx b/components/series/settings/SeriesBooksManager.tsx
index 39bb205..31fea72 100644
--- a/components/series/settings/SeriesBooksManager.tsx
+++ b/components/series/settings/SeriesBooksManager.tsx
@@ -1,91 +1,64 @@
 'use client'
 import {forwardRef, useContext, useEffect, useImperativeHandle, useState} from "react";
-import System from "@/lib/models/System";
-import {AlertContext} from "@/context/AlertContext";
-import {SessionContext} from "@/context/SessionContext";
-import {useTranslations} from "next-intl";
+import {apiDelete, apiGet, apiPost, apiPut} from '@/lib/api/client';
+import {AlertContext, AlertContextProps} from "@/context/AlertContext";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {useTranslations} from '@/lib/i18n';
 import {LangContext, LangContextProps} from "@/context/LangContext";
 import {SeriesContext, SeriesContextProps} from "@/context/SeriesContext";
-import {SeriesBookProps} from "@/lib/models/Series";
+import {SeriesBookProps} from "@/lib/types/series";
 import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
-import {SyncedBook} from "@/lib/models/SyncedBook";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faArrowDown, faArrowUp, faBook, faPlus, faSpinner, faTrash} from "@fortawesome/free-solid-svg-icons";
-import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
-import {SeriesSyncContext, SeriesSyncContextProps} from "@/context/SeriesSyncContext";
-import {SyncedSeries, SyncedSeriesBook} from "@/lib/models/SyncedSeries";
-import * as tauri from '@/lib/tauri';
+import {SyncedBook} from "@/lib/types/synced-book";
+import {ArrowDown, ArrowUp, Book, Trash2} from 'lucide-react';
+import PulseLoader from '@/components/ui/PulseLoader';
+import InputField from '@/components/form/InputField';
+import SelectBox from '@/components/form/SelectBox';
+import IconButton from "@/components/ui/IconButton";
+import EmptyState from "@/components/ui/EmptyState";
+import Badge from "@/components/ui/Badge";
+import EntityListItem from "@/components/ui/EntityListItem";
 
 function SeriesBooksManager(props: object, ref: React.Ref<{ handleSave: () => Promise<void> }>) {
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-
-    const {session} = useContext(SessionContext);
-    const {seriesId, localSeries} = useContext<SeriesContextProps>(SeriesContext);
-    const {serverSyncedBooks, setServerSyncedBooks, localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {seriesId}: SeriesContextProps = useContext<SeriesContextProps>(SeriesContext);
+    const {
+        serverSyncedBooks,
+        setServerSyncedBooks
+    }: BooksSyncContextProps = useContext<BooksSyncContextProps>(BooksSyncContext);
     const userToken: string = session?.accessToken ? session?.accessToken : '';
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedSeries, serverSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
-
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [seriesBooks, setSeriesBooks] = useState<SeriesBookProps[]>([]);
     const [selectedBookToAdd, setSelectedBookToAdd] = useState<string>('');
     const [availableBooks, setAvailableBooks] = useState<SyncedBook[]>([]);
-
+    
     useEffect(function () {
         if (seriesId) {
             loadSeriesBooks();
         }
     }, [seriesId]);
-
+    
     useEffect(function () {
-        const booksInThisSeries: string[] = seriesBooks.map((book: SeriesBookProps) => book.bookId);
-        let allBooks: SyncedBook[];
-        let allSeries: SyncedSeries[];
-
-        if (isCurrentlyOffline() || localSeries) {
-            allBooks = localSyncedBooks;
-            allSeries = localSyncedSeries;
-        } else {
-            allBooks = serverSyncedBooks;
-            allSeries = serverSyncedSeries;
-        }
-
-        // Get all bookIds in OTHER series (not this one)
-        const booksInOtherSeries: Set<string> = new Set(
-            allSeries
-                .filter((series: SyncedSeries): boolean => series.id !== seriesId)
-                .flatMap((series: SyncedSeries): string[] =>
-                    series.books.map((book: SyncedSeriesBook): string => book.bookId)
-                )
-        );
-
-        // Filter out books already in this series AND books already in another series
-        const filteredBooks: SyncedBook[] = allBooks.filter(
-            (book: SyncedBook) => !booksInThisSeries.includes(book.id) && !booksInOtherSeries.has(book.id)
+        const booksInSeries: string[] = seriesBooks.map((book: SeriesBookProps) => book.bookId);
+        const filteredBooks: SyncedBook[] = serverSyncedBooks.filter(
+            (book: SyncedBook) => !booksInSeries.includes(book.id)
         );
         setAvailableBooks(filteredBooks);
-    }, [seriesBooks, serverSyncedBooks, localSyncedBooks, serverSyncedSeries, localSyncedSeries, isCurrentlyOffline, localSeries, seriesId]);
-
+    }, [seriesBooks, serverSyncedBooks]);
+    
     async function loadSeriesBooks(): Promise<void> {
         setIsLoading(true);
         try {
-            let response: SeriesBookProps[];
-
-            if (isCurrentlyOffline() || localSeries) {
-                response = await tauri.getSeriesBooks(seriesId);
-            } else {
-                response = await System.authGetQueryToServer<SeriesBookProps[]>(
-                    'series/book/list',
-                    userToken,
-                    lang,
-                    {seriesid: seriesId}
-                );
-            }
-
+            const response: SeriesBookProps[] = await apiGet<SeriesBookProps[]>(
+                'series/book/list',
+                userToken,
+                lang,
+                {seriesid: seriesId}
+            );
             if (response) {
                 setSeriesBooks(response);
             }
@@ -99,48 +72,36 @@ function SeriesBooksManager(props: object, ref: React.Ref<{ handleSave: () => Pr
             setIsLoading(false);
         }
     }
-
+    
     useImperativeHandle(ref, function () {
         return {
             handleSave: handleSave
         };
     });
-
+    
     async function handleSave(): Promise<void> {
         successMessage(t('seriesBooks.success.saved'));
     }
-
+    
     async function handleAddBook(): Promise<void> {
         if (!selectedBookToAdd) {
             errorMessage(t('seriesBooks.error.selectBook'));
             return;
         }
-
+        
         try {
-            const addData = {
-                seriesId: seriesId,
-                bookId: selectedBookToAdd
-            };
-            let response: boolean;
-
-            if (isCurrentlyOffline() || localSeries) {
-                response = await tauri.addBookToSeries(addData.seriesId, addData.bookId);
-            } else {
-                response = await System.authPostToServer<boolean>(
-                    'series/book/add',
-                    addData,
-                    userToken,
-                    lang
-                );
-
-                if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                    addToQueue('add_book_to_series', {data: addData});
-                }
-            }
-
+            const response: boolean = await apiPost<boolean>(
+                'series/book/add',
+                {
+                    seriesId: seriesId,
+                    bookId: selectedBookToAdd
+                },
+                userToken,
+                lang
+            );
+            
             if (response) {
-                const allBooks: SyncedBook[] = isCurrentlyOffline() || localSeries ? localSyncedBooks : serverSyncedBooks;
-                const addedBook: SyncedBook | undefined = allBooks.find(
+                const addedBook: SyncedBook | undefined = serverSyncedBooks.find(
                     (book: SyncedBook) => book.id === selectedBookToAdd
                 );
                 if (addedBook) {
@@ -151,7 +112,7 @@ function SeriesBooksManager(props: object, ref: React.Ref<{ handleSave: () => Pr
                         coverImage: null
                     };
                     setSeriesBooks([...seriesBooks, newSeriesBook]);
-
+                    
                     setServerSyncedBooks((prev: SyncedBook[]): SyncedBook[] =>
                         prev.map((book: SyncedBook): SyncedBook =>
                             book.id === selectedBookToAdd
@@ -170,31 +131,19 @@ function SeriesBooksManager(props: object, ref: React.Ref<{ handleSave: () => Pr
             }
         }
     }
-
+    
     async function handleRemoveBook(bookId: string): Promise<void> {
         try {
-            const removeData = {
-                seriesId: seriesId,
-                bookId: bookId,
-                deletedAt: System.timeStampInSeconds(),
-            };
-            let response: boolean;
-
-            if (isCurrentlyOffline() || localSeries) {
-                response = await tauri.removeBookFromSeries(removeData.seriesId, removeData.bookId, removeData.deletedAt);
-            } else {
-                response = await System.authDeleteToServer<boolean>(
-                    'series/book/remove',
-                    removeData,
-                    userToken,
-                    lang
-                );
-
-                if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                    addToQueue('remove_book_from_series', {data: removeData});
-                }
-            }
-
+            const response: boolean = await apiDelete<boolean>(
+                'series/book/remove',
+                {
+                    seriesId: seriesId,
+                    bookId: bookId
+                },
+                userToken,
+                lang
+            );
+            
             if (response) {
                 const updatedBooks: SeriesBookProps[] = seriesBooks
                     .filter((book: SeriesBookProps) => book.bookId !== bookId)
@@ -203,7 +152,7 @@ function SeriesBooksManager(props: object, ref: React.Ref<{ handleSave: () => Pr
                         order: index + 1
                     }));
                 setSeriesBooks(updatedBooks);
-
+                
                 setServerSyncedBooks((prev: SyncedBook[]): SyncedBook[] =>
                     prev.map((book: SyncedBook): SyncedBook =>
                         book.id === bookId
@@ -220,48 +169,37 @@ function SeriesBooksManager(props: object, ref: React.Ref<{ handleSave: () => Pr
             }
         }
     }
-
+    
     async function handleMoveBook(bookId: string, direction: 'up' | 'down'): Promise<void> {
         const currentIndex: number = seriesBooks.findIndex((book: SeriesBookProps) => book.bookId === bookId);
         if (currentIndex === -1) return;
-
+        
         const newIndex: number = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
         if (newIndex < 0 || newIndex >= seriesBooks.length) return;
-
+        
         const reorderedBooks: SeriesBookProps[] = [...seriesBooks];
         const [movedBook] = reorderedBooks.splice(currentIndex, 1);
         reorderedBooks.splice(newIndex, 0, movedBook);
-
+        
         const updatedBooks: SeriesBookProps[] = reorderedBooks.map((book: SeriesBookProps, index: number) => ({
             ...book,
             order: index + 1
         }));
-
+        
         try {
-            const reorderData = {
-                seriesId: seriesId,
-                booksOrder: updatedBooks.map((book: SeriesBookProps) => ({
-                    bookId: book.bookId,
-                    order: book.order
-                }))
-            };
-            let response: boolean;
-
-            if (isCurrentlyOffline() || localSeries) {
-                response = await tauri.reorderSeriesBooks(reorderData.seriesId, reorderData.booksOrder);
-            } else {
-                response = await System.authPutToServer<boolean>(
-                    'series/book/reorder',
-                    reorderData,
-                    userToken,
-                    lang
-                );
-
-                if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
-                    addToQueue('reorder_series_books', {data: reorderData});
-                }
-            }
-
+            const response: boolean = await apiPut<boolean>(
+                'series/book/reorder',
+                {
+                    seriesId: seriesId,
+                    booksOrder: updatedBooks.map((book: SeriesBookProps) => ({
+                        bookId: book.bookId,
+                        order: book.order
+                    }))
+                },
+                userToken,
+                lang
+            );
+            
             if (response) {
                 setSeriesBooks(updatedBooks);
             }
@@ -273,96 +211,74 @@ function SeriesBooksManager(props: object, ref: React.Ref<{ handleSave: () => Pr
             }
         }
     }
-
+    
     if (isLoading) {
-        return (
-            <div className="flex items-center justify-center py-12">
-                <FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
-            </div>
-        );
+        return <PulseLoader/>;
     }
 
     return (
         <div className="space-y-6">
-            <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                <h3 className="text-lg font-semibold text-text-primary mb-4">
-                    {t('seriesBooks.addBook')}
-                </h3>
-                <div className="flex gap-3">
-                    <select
-                        value={selectedBookToAdd}
-                        onChange={(e) => setSelectedBookToAdd(e.target.value)}
-                        className="flex-1 bg-secondary/50 border border-secondary/50 rounded-lg px-4 py-2 text-text-primary focus:outline-none focus:border-primary"
-                    >
-                        <option value="">{t('seriesBooks.selectBookPlaceholder')}</option>
-                        {availableBooks.map((book: SyncedBook) => (
-                            <option key={book.id} value={book.id}>
-                                {book.title}
-                            </option>
-                        ))}
-                    </select>
-                    <button
-                        onClick={handleAddBook}
-                        disabled={!selectedBookToAdd}
-                        className="bg-primary hover:bg-primary-dark disabled:bg-secondary disabled:cursor-not-allowed text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center gap-2"
-                    >
-                        <FontAwesomeIcon icon={faPlus} className="w-4 h-4"/>
-                        {t('seriesBooks.add')}
-                    </button>
-                </div>
-            </div>
-
-            <div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-md">
-                <h3 className="text-lg font-semibold text-text-primary mb-4">
+            <InputField
+                fieldName={t('seriesBooks.addBook')}
+                input={
+                    <SelectBox
+                        onChangeCallBack={(e) => setSelectedBookToAdd(e.target.value)}
+                        data={availableBooks.map((book: SyncedBook) => ({label: book.title, value: book.id}))}
+                        defaultValue={selectedBookToAdd}
+                        placeholder={t('seriesBooks.selectBookPlaceholder')}
+                    />
+                }
+                addButtonCallBack={handleAddBook}
+                isAddButtonDisabled={!selectedBookToAdd}
+            />
+            
+            <div>
+                <p className="text-text-secondary text-sm font-medium mb-3">
                     {t('seriesBooks.booksInSeries')} ({seriesBooks.length})
-                </h3>
+                </p>
 
                 {seriesBooks.length === 0 ? (
-                    <div className="text-center py-8 text-text-secondary">
-                        <FontAwesomeIcon icon={faBook} className="w-12 h-12 mb-4 opacity-50"/>
-                        <p>{t('seriesBooks.noBooks')}</p>
-                    </div>
+                    <EmptyState icon={Book} title={t('seriesBooks.noBooks')}/>
                 ) : (
                     <div className="space-y-2">
                         {seriesBooks
                             .sort((a: SeriesBookProps, b: SeriesBookProps) => a.order - b.order)
                             .map((book: SeriesBookProps, index: number) => (
-                                <div
+                                <EntityListItem
                                     key={book.bookId}
-                                    className="flex items-center justify-between bg-secondary/30 rounded-lg p-3 border border-secondary/30 hover:border-primary/30 transition-colors duration-200"
-                                >
-                                    <div className="flex items-center gap-3">
-                                        <span className="bg-primary/20 text-primary font-bold w-8 h-8 rounded-full flex items-center justify-center text-sm">
-                                            {book.order}
-                                        </span>
-                                        <span className="text-text-primary font-medium">{book.title}</span>
-                                    </div>
-                                    <div className="flex items-center gap-2">
-                                        <button
-                                            onClick={() => handleMoveBook(book.bookId, 'up')}
-                                            disabled={index === 0}
-                                            className="p-2 rounded-lg hover:bg-secondary/50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors duration-200"
-                                            title={t('seriesBooks.moveUp')}
-                                        >
-                                            <FontAwesomeIcon icon={faArrowUp} className="w-4 h-4 text-text-secondary"/>
-                                        </button>
-                                        <button
-                                            onClick={() => handleMoveBook(book.bookId, 'down')}
-                                            disabled={index === seriesBooks.length - 1}
-                                            className="p-2 rounded-lg hover:bg-secondary/50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors duration-200"
-                                            title={t('seriesBooks.moveDown')}
-                                        >
-                                            <FontAwesomeIcon icon={faArrowDown} className="w-4 h-4 text-text-secondary"/>
-                                        </button>
-                                        <button
-                                            onClick={() => handleRemoveBook(book.bookId)}
-                                            className="p-2 rounded-lg hover:bg-error/20 text-error transition-colors duration-200"
-                                            title={t('seriesBooks.removeBook')}
-                                        >
-                                            <FontAwesomeIcon icon={faTrash} className="w-4 h-4"/>
-                                        </button>
-                                    </div>
-                                </div>
+                                    onClick={function (): void {
+                                    }}
+                                    size="sm"
+                                    avatar={<Badge variant="primary" size="sm">{book.order}</Badge>}
+                                    title={book.title}
+                                    extra={
+                                        <div className="flex items-center gap-1">
+                                            <IconButton
+                                                icon={ArrowUp}
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() => handleMoveBook(book.bookId, 'up')}
+                                                disabled={index === 0}
+                                                tooltip={t('seriesBooks.moveUp')}
+                                            />
+                                            <IconButton
+                                                icon={ArrowDown}
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() => handleMoveBook(book.bookId, 'down')}
+                                                disabled={index === seriesBooks.length - 1}
+                                                tooltip={t('seriesBooks.moveDown')}
+                                            />
+                                            <IconButton
+                                                icon={Trash2}
+                                                variant="danger"
+                                                size="sm"
+                                                onClick={() => handleRemoveBook(book.bookId)}
+                                                tooltip={t('seriesBooks.removeBook')}
+                                            />
+                                        </div>
+                                    }
+                                />
                             ))}
                     </div>
                 )}
diff --git a/context/AlertProvider.tsx b/context/AlertProvider.tsx
index 2782b29..065dc27 100644
--- a/context/AlertProvider.tsx
+++ b/context/AlertProvider.tsx
@@ -2,8 +2,7 @@
 
 import type {Context, Dispatch, JSX, ReactNode, SetStateAction} from 'react';
 import React, {createContext, useCallback, useState} from 'react';
-import AlertStack from '@/components/AlertStack';
-import {cleanErrorMessage} from '@/lib/errors';
+import AlertStack from '@/components/ui/AlertStack';
 
 export type AlertType = 'success' | 'error' | 'info' | 'warning';
 
diff --git a/context/BookContext.ts b/context/BookContext.ts
index 980090e..213331b 100755
--- a/context/BookContext.ts
+++ b/context/BookContext.ts
@@ -1,13 +1,13 @@
 import {Context, createContext, Dispatch, SetStateAction} from "react";
-import {BookProps} from "@/lib/models/Book";
+import {BookProps} from "@/lib/types/book";
 
 export interface BookContextProps {
     book: BookProps | null,
-    setBook?: Dispatch<SetStateAction<BookProps | null>>
+    setBook: Dispatch<SetStateAction<BookProps | null>>
 }
 
 export const BookContext: Context<BookContextProps> = createContext<BookContextProps>({
     book: null,
-    setBook: () => {
+    setBook: (): void => {
     }
 })
diff --git a/context/BooksSyncContext.ts b/context/BooksSyncContext.ts
index 1898d8a..9096f26 100644
--- a/context/BooksSyncContext.ts
+++ b/context/BooksSyncContext.ts
@@ -1,34 +1,13 @@
-import {BookSyncCompare, SyncedBook} from "@/lib/models/SyncedBook";
+import {SyncedBook} from "@/lib/types/synced-book";
 import {Context, createContext, Dispatch, SetStateAction} from "react";
 
-export type SyncType = 'server-only' | 'local-only' | 'to-sync-from-server' | 'to-sync-to-server' | 'synced'
-
 export interface BooksSyncContextProps {
-    serverSyncedBooks:SyncedBook[];
-    localSyncedBooks:SyncedBook[];
-    booksToSyncFromServer:BookSyncCompare[];
-    booksToSyncToServer:BookSyncCompare[];
-    setServerSyncedBooks:Dispatch<SetStateAction<SyncedBook[]>>;
-    setLocalSyncedBooks:Dispatch<SetStateAction<SyncedBook[]>>;
-    setServerOnlyBooks:Dispatch<SetStateAction<SyncedBook[]>>;
-    setLocalOnlyBooks:Dispatch<SetStateAction<SyncedBook[]>>;
-    setBooksToSyncFromServer:Dispatch<SetStateAction<BookSyncCompare[]>>;
-    setBooksToSyncToServer:Dispatch<SetStateAction<BookSyncCompare[]>>;
-    serverOnlyBooks:SyncedBook[];
-    localOnlyBooks:SyncedBook[];
+    setServerSyncedBooks: Dispatch<SetStateAction<SyncedBook[]>>;
+    serverSyncedBooks: SyncedBook[];
 }
 
-export const BooksSyncContext:Context<BooksSyncContextProps> = createContext<BooksSyncContextProps>({
-    serverSyncedBooks:[],
-    localSyncedBooks:[],
-    booksToSyncFromServer:[],
-    booksToSyncToServer:[],
-    setServerSyncedBooks:():void => {},
-    setLocalSyncedBooks:():void => {},
-    setServerOnlyBooks:():void => {},
-    setLocalOnlyBooks:():void => {},
-    setBooksToSyncFromServer:():void => {},
-    setBooksToSyncToServer:():void => {},
-    serverOnlyBooks:[],
-    localOnlyBooks:[]
+export const BooksSyncContext: Context<BooksSyncContextProps> = createContext<BooksSyncContextProps>({
+    serverSyncedBooks: [],
+    setServerSyncedBooks: (): void => {
+    }
 })
\ No newline at end of file
diff --git a/context/ChapterContext.ts b/context/ChapterContext.ts
index 2827bf4..9ef32cb 100755
--- a/context/ChapterContext.ts
+++ b/context/ChapterContext.ts
@@ -1,5 +1,5 @@
-import {ChapterProps} from "@/lib/models/Chapter";
-import {createContext, Dispatch, SetStateAction} from "react";
+import {ChapterProps} from "@/lib/types/chapter";
+import {Context, createContext, Dispatch, SetStateAction} from "react";
 
 
 export interface ChapterContextProps {
@@ -7,8 +7,8 @@ export interface ChapterContextProps {
     setChapter: Dispatch<SetStateAction<ChapterProps | undefined>>
 }
 
-export const ChapterContext = createContext<ChapterContextProps>({
+export const ChapterContext: Context<ChapterContextProps> = createContext<ChapterContextProps>({
     chapter: undefined,
-    setChapter: () => {
+    setChapter: (_value: SetStateAction<ChapterProps | undefined>): void => {
     }
 })
diff --git a/context/EditorContext.ts b/context/EditorContext.ts
index 677c358..529b3c8 100755
--- a/context/EditorContext.ts
+++ b/context/EditorContext.ts
@@ -1,10 +1,10 @@
-import {createContext} from "react";
+import {Context, createContext} from "react";
 import {Editor} from "@tiptap/core";
 
 export interface EditorContextProps {
     editor: Editor | null
 }
 
-export const EditorContext = createContext<EditorContextProps>({
+export const EditorContext: Context<EditorContextProps> = createContext<EditorContextProps>({
     editor: null
 });
diff --git a/context/LangContext.ts b/context/LangContext.ts
index b04bca3..1137904 100644
--- a/context/LangContext.ts
+++ b/context/LangContext.ts
@@ -2,6 +2,10 @@ import {Context, createContext, Dispatch, SetStateAction} from "react";
 
 export type SupportedLocale = 'fr' | 'en';
 
+export function isSupportedLocale(value: string | null): value is SupportedLocale {
+    return value === 'fr' || value === 'en';
+}
+
 export interface LangContextProps {
     lang: SupportedLocale;
     setLang: Dispatch<SetStateAction<SupportedLocale>>;
diff --git a/context/OfflineContext.ts b/context/OfflineContext.ts
index 77832f5..405ac0b 100644
--- a/context/OfflineContext.ts
+++ b/context/OfflineContext.ts
@@ -1,35 +1,11 @@
-import { createContext, Dispatch, SetStateAction } from 'react';
-
-export interface OfflineMode {
-    isManuallyOffline: boolean;
-    isNetworkOnline: boolean;
-    isOffline: boolean;
-    isDatabaseInitialized: boolean;
-    error: string | null;
-}
-
-export interface OfflineContextType {
-    offlineMode: OfflineMode;
-    setOfflineMode: Dispatch<SetStateAction<OfflineMode>>;
-    toggleOfflineMode: () => void;
-    initializeDatabase: (userId: string, encryptionKey?: string) => Promise<boolean>;
-    isCurrentlyOffline: () => boolean;
-}
-
-export const defaultOfflineMode: OfflineMode = {
-    isManuallyOffline: false,
-    isNetworkOnline: typeof navigator !== 'undefined' ? navigator.onLine : true,
-    isOffline: false,
-    isDatabaseInitialized: false,
-    error: null
-};
-
-const OfflineContext = createContext<OfflineContextType>({
-    offlineMode: defaultOfflineMode,
-    setOfflineMode: () => {},
-    toggleOfflineMode: () => {},
-    initializeDatabase: async () => false,
-    isCurrentlyOffline: () => false
-});
-
-export default OfflineContext;
+import {createContext} from 'react';
+
+export interface OfflineContextType {
+    isCurrentlyOffline: () => boolean;
+}
+
+const OfflineContext = createContext<OfflineContextType>({
+    isCurrentlyOffline: () => false,
+});
+
+export default OfflineContext;
diff --git a/context/SeriesContext.ts b/context/SeriesContext.ts
index 1ec743e..368ee8a 100644
--- a/context/SeriesContext.ts
+++ b/context/SeriesContext.ts
@@ -2,10 +2,8 @@ import {Context, createContext} from "react";
 
 export interface SeriesContextProps {
     seriesId: string;
-    localSeries: boolean;
 }
 
 export const SeriesContext: Context<SeriesContextProps> = createContext<SeriesContextProps>({
-    seriesId: '',
-    localSeries: false
+    seriesId: ''
 });
diff --git a/context/SeriesSyncContext.ts b/context/SeriesSyncContext.ts
index 4681742..8e4d5e9 100644
--- a/context/SeriesSyncContext.ts
+++ b/context/SeriesSyncContext.ts
@@ -1,4 +1,4 @@
-import { SeriesSyncCompare, SyncedSeries } from "@/lib/models/SyncedSeries";
+import { SeriesSyncCompare, SyncedSeries } from "@/lib/types/synced-series";
 import { Context, createContext, Dispatch, SetStateAction } from "react";
 
 /**
diff --git a/context/SessionContext.ts b/context/SessionContext.ts
index 66d2a1b..985312e 100755
--- a/context/SessionContext.ts
+++ b/context/SessionContext.ts
@@ -1,4 +1,4 @@
-import {SessionProps} from "@/lib/models/Session";
+import {SessionProps} from "@/lib/types/session";
 import {Context, createContext, Dispatch, SetStateAction} from "react";
 
 export interface SessionContextProps {
@@ -12,6 +12,6 @@ export const SessionContext: Context<SessionContextProps> = createContext<Sessio
         accessToken: "",
         user: null,
     },
-    setSession: () => {
+    setSession: (): void => {
     },
 })
diff --git a/context/WorldContext.ts b/context/WorldContext.ts
old mode 100755
new mode 100644
index d0314ff..fb042eb
--- a/context/WorldContext.ts
+++ b/context/WorldContext.ts
@@ -1,4 +1,4 @@
-import {WorldProps} from "@/lib/models/World";
+import {WorldProps} from "@/lib/types/world";
 import {createContext, Dispatch, SetStateAction} from "react";
 
 export interface WorldContextProps {
@@ -8,4 +8,10 @@ export interface WorldContextProps {
     isSeriesMode?: boolean;
 }
 
-export const WorldContext = createContext<WorldContextProps>({} as WorldContextProps);
+export const WorldContext = createContext<WorldContextProps>({
+    worlds: [],
+    setWorlds: (): void => {
+    },
+    selectedWorldIndex: 0,
+    isSeriesMode: false,
+});
diff --git a/hooks/settings/useCharacters.ts b/hooks/settings/useCharacters.ts
index 1328716..4c0b918 100644
--- a/hooks/settings/useCharacters.ts
+++ b/hooks/settings/useCharacters.ts
@@ -1,22 +1,24 @@
 'use client'
 import {useCallback, useContext, useEffect, useState} from 'react';
-import {Attribute, CharacterListResponse, CharacterProps} from '@/lib/models/Character';
-import {SeriesCharacterProps} from '@/lib/models/Series';
-import * as tauri from '@/lib/tauri';
-import {SessionContext} from '@/context/SessionContext';
-import {BookContext} from '@/context/BookContext';
-import {AlertContext} from '@/context/AlertContext';
+import {
+    Attribute,
+    CharacterAttributeSection,
+    CharacterListResponse,
+    CharacterProps,
+    isCharacterCategory,
+    isCharacterStatus
+} from '@/lib/types/character';
+import {SeriesCharacterProps} from '@/lib/types/series';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
 import {LangContext, LangContextProps} from '@/context/LangContext';
+import {apiDelete, apiGet, apiPatch, apiPost} from '@/lib/api/client';
+import {useTranslations} from '@/lib/i18n';
+import {ViewMode} from '@/lib/types/settings';
+import {isDesktop} from '@/lib/configs';
+import * as tauri from '@/lib/tauri';
 import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from '@/context/SyncQueueContext';
-import {BooksSyncContext, BooksSyncContextProps} from '@/context/BooksSyncContext';
-import {SyncedBook} from '@/lib/models/SyncedBook';
-import {SeriesContext, SeriesContextProps} from '@/context/SeriesContext';
-import {SeriesSyncContext, SeriesSyncContextProps} from '@/context/SeriesSyncContext';
-import {SyncedSeries} from '@/lib/models/SyncedSeries';
-import System from '@/lib/models/System';
-import {useTranslations} from 'next-intl';
-import {ViewMode} from '@/shared/interface';
 
 const initialCharacterState: CharacterProps = {
     id: null,
@@ -73,11 +75,11 @@ export interface UseCharactersReturn {
     isLoading: boolean;
     isSeriesMode: boolean;
     bookSeriesId: string | null;
-
+    
     // Navigation state
     viewMode: ViewMode;
     characterBackup: CharacterProps | null;
-
+    
     // Actions
     selectCharacter: (character: CharacterProps) => void;
     addNewCharacter: () => void;
@@ -85,15 +87,15 @@ export interface UseCharactersReturn {
     saveCharacter: () => Promise<boolean>;
     deleteCharacter: (characterId: string) => Promise<void>;
     updateCharacterField: (key: keyof CharacterProps, value: string | number | null) => void;
-    addAttribute: (section: keyof CharacterProps, value: Attribute) => Promise<void>;
-    removeAttribute: (section: keyof CharacterProps, index: number, attrId: string) => Promise<void>;
+    addAttribute: (section: CharacterAttributeSection, value: Attribute) => Promise<void>;
+    removeAttribute: (section: CharacterAttributeSection, index: number, attrId: string) => Promise<void>;
     toggleTool: (enabled: boolean) => Promise<void>;
     importFromSeries: (seriesCharacterId: string) => Promise<void>;
     exportToSeries: () => Promise<void>;
     refreshCharacters: () => Promise<void>;
     refreshSeriesCharacters: () => Promise<void>;
     setSelectedCharacter: React.Dispatch<React.SetStateAction<CharacterProps | null>>;
-
+    
     // Navigation actions
     enterDetailMode: (character: CharacterProps) => void;
     enterEditMode: () => void;
@@ -104,85 +106,66 @@ export interface UseCharactersReturn {
 export function useCharacters(config: UseCharactersConfig): UseCharactersReturn {
     const {entityType, entityId} = config;
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {session} = useContext(SessionContext);
-    const {book, setBook} = useContext(BookContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {localSeries} = useContext<SeriesContextProps>(SeriesContext);
-    const {localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
-
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {book, setBook}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
+    
     const [characters, setCharacters] = useState<CharacterProps[]>([]);
     const [seriesCharacters, setSeriesCharacters] = useState<SeriesCharacterProps[]>([]);
     const [selectedCharacter, setSelectedCharacter] = useState<CharacterProps | null>(null);
     const [toolEnabled, setToolEnabled] = useState<boolean>(entityType === 'series' || (book?.tools?.characters ?? false));
     const [isLoading, setIsLoading] = useState<boolean>(true);
-
+    
     // Navigation state
     const [viewMode, setViewMode] = useState<ViewMode>('list');
     const [characterBackup, setCharacterBackup] = useState<CharacterProps | null>(null);
-
+    
     const isSeriesMode: boolean = entityType === 'series';
     const bookSeriesId: string | null = book?.seriesId || null;
     const userToken: string = session?.accessToken || '';
-
+    
     // Load characters on mount
     useEffect(function (): void {
         if (entityId) {
             refreshCharacters();
         }
     }, [entityId]);
-
+    
     // Load series characters for book mode
     useEffect(function (): void {
         if (bookSeriesId && !isSeriesMode) {
             refreshSeriesCharacters();
         }
     }, [bookSeriesId, isSeriesMode]);
-
+    
     const refreshSeriesCharacters = useCallback(async function (): Promise<void> {
         if (!bookSeriesId) return;
         try {
-            let response: SeriesCharacterProps[];
-            // Dual logic: offline ou livre local → IPC, sinon serveur
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getSeriesCharacterList(bookSeriesId);
-            } else {
-                response = await System.authGetQueryToServer<SeriesCharacterProps[]>(
-                    'series/character/list',
-                    userToken,
-                    lang,
-                    {seriesid: bookSeriesId}
-                );
-            }
+            const response: SeriesCharacterProps[] = await apiGet<SeriesCharacterProps[]>('series/character/list', userToken, lang, {
+                seriesid: bookSeriesId
+            });
             if (response) {
                 setSeriesCharacters(response);
             }
         } catch (e: unknown) {
             if (e instanceof Error) {
-                console.error('Error loading series characters:', e.message);
+                errorMessage(e.message);
             }
         }
-    }, [bookSeriesId, userToken, lang, isCurrentlyOffline, book?.localBook]);
-
+    }, [bookSeriesId, userToken, lang]);
+    
     const refreshCharacters = useCallback(async function (): Promise<void> {
         setIsLoading(true);
         try {
             if (isSeriesMode) {
-                // Series mode - dual logic
-                let response: SeriesCharacterProps[];
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.getSeriesCharacterList(entityId);
-                } else {
-                    response = await System.authGetQueryToServer<SeriesCharacterProps[]>(
-                        'series/character/list',
-                        userToken,
-                        lang,
-                        {seriesid: entityId}
-                    );
-                }
+                const response: SeriesCharacterProps[] = await apiGet<SeriesCharacterProps[]>(
+                    'series/character/list',
+                    userToken,
+                    lang,
+                    {seriesid: entityId}
+                );
                 if (response) {
                     const mappedCharacters: CharacterProps[] = response.map(function (char: SeriesCharacterProps): CharacterProps {
                         return {
@@ -194,8 +177,8 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
                             gender: '',
                             species: '',
                             nationality: '',
-                            status: 'alive' as const,
-                            category: char.category as CharacterProps['category'],
+                            status: char.status && isCharacterStatus(char.status) ? char.status : 'alive',
+                            category: isCharacterCategory(char.category) ? char.category : 'none',
                             title: '',
                             role: char.role || '',
                             image: char.image || 'https://via.placeholder.com/150',
@@ -223,22 +206,11 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
                     setCharacters(mappedCharacters);
                 }
             } else {
-                // Pattern B: GET dans contexte livre
                 let response: CharacterListResponse;
-                if (isCurrentlyOffline()) {
-                    // Offline → Tauri
-                    response = await tauri.getCharacterList(entityId, true) as CharacterListResponse;
-                } else if (book?.localBook) {
-                    // Online mais livre local → Tauri
-                    response = await tauri.getCharacterList(entityId, true) as CharacterListResponse;
+                if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                    response = await tauri.getCharacterList(entityId, book?.tools?.characters ?? false) as CharacterListResponse;
                 } else {
-                    // Online + livre serveur → Server
-                    response = await System.authGetQueryToServer<CharacterListResponse>(
-                        'character/list',
-                        userToken,
-                        lang,
-                        {bookid: entityId}
-                    );
+                    response = await apiGet<CharacterListResponse>('character/list', userToken, lang, {bookid: entityId});
                 }
                 if (response) {
                     setCharacters(response.characters);
@@ -265,54 +237,44 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
         } finally {
             setIsLoading(false);
         }
-    }, [entityId, isSeriesMode, userToken, lang, book, setBook, errorMessage, t, isCurrentlyOffline]);
-
+    }, [entityId, isSeriesMode, userToken, lang, book, setBook, errorMessage, t]);
+    
     const selectCharacter = useCallback(function (character: CharacterProps): void {
         setSelectedCharacter({...character});
     }, []);
-
+    
     const addNewCharacter = useCallback(function (): void {
         setSelectedCharacter({...initialCharacterState});
         setViewMode('edit');
         setCharacterBackup(null);
     }, []);
-
+    
     const clearSelection = useCallback(function (): void {
         setSelectedCharacter(null);
         setViewMode('list');
         setCharacterBackup(null);
     }, []);
-
+    
     const updateCharacterField = useCallback(function (key: keyof CharacterProps, value: string | number | null): void {
         setSelectedCharacter(function (prev: CharacterProps | null): CharacterProps | null {
             if (!prev) return null;
             return {...prev, [key]: value};
         });
     }, []);
-
+    
     const toggleTool = useCallback(async function (enabled: boolean): Promise<void> {
         if (isSeriesMode) return;
         try {
-            const requestData = {
-                bookId: book?.bookId,
-                toolName: 'characters',
-                enabled: enabled
-            };
-
             let response: boolean;
-            if (isCurrentlyOffline() || book?.localBook) {
-                // Offline OU livre local → Tauri
-                response = await tauri.updateBookToolSetting(requestData.bookId, requestData.toolName, requestData.enabled);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.updateBookToolSetting(book?.bookId ?? '', 'characters', enabled);
             } else {
-                // Online + livre serveur → Server
-                response = await System.authPatchToServer<boolean>('book/tool-setting', requestData, userToken, lang);
-
-                // Si le livre a une copie locale → addToQueue pour sync
-                if (book?.bookId && localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === book.bookId)) {
-                    addToQueue('update_book_tool_setting', {data: requestData});
-                }
+                response = await apiPatch<boolean>('book/tool-setting', {
+                    bookId: book?.bookId,
+                    toolName: 'characters',
+                    enabled: enabled
+                }, userToken, lang);
             }
-
             if (response && setBook && book) {
                 setToolEnabled(enabled);
                 setBook({
@@ -330,8 +292,8 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
                 errorMessage(e.message);
             }
         }
-    }, [isSeriesMode, book, setBook, userToken, lang, errorMessage, isCurrentlyOffline, addToQueue, localSyncedBooks]);
-
+    }, [isSeriesMode, book, setBook, userToken, lang, errorMessage]);
+    
     const saveCharacter = useCallback(async function (): Promise<boolean> {
         if (!selectedCharacter) return false;
 
@@ -341,7 +303,7 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
             return await updateCharacterInternal(selectedCharacter);
         }
     }, [selectedCharacter]);
-
+    
     async function addCharacterInternal(character: CharacterProps): Promise<boolean> {
         if (!character.name) {
             errorMessage(t("characterComponent.errorNameRequired"));
@@ -354,63 +316,42 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
         try {
             let characterId: string;
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const seriesCharacterData = {
-                    seriesId: entityId,
-                    character: {
-                        name: character.name,
-                        lastName: character.lastName || null,
-                        nickname: character.nickname || null,
-                        age: character.age || null,
-                        gender: character.gender || null,
-                        species: character.species || null,
-                        nationality: character.nationality || null,
-                        status: character.status || null,
-                        category: character.category,
-                        title: character.title || null,
-                        image: character.image || null,
-                        role: character.role || null,
-                        biography: character.biography || null,
-                        history: character.history || null,
-                        speechPattern: character.speechPattern || null,
-                        catchphrase: character.catchphrase || null,
-                        residence: character.residence || null,
-                        notes: character.notes || null,
-                        color: character.color || null,
-                    }
-                };
-                if (isCurrentlyOffline() || localSeries) {
-                    characterId = await tauri.addSeriesCharacter(seriesCharacterData);
-                } else {
-                    characterId = await System.authPostToServer<string>(
-                        'series/character/add',
-                        seriesCharacterData,
-                        userToken,
-                        lang
-                    );
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('add_series_character', {data: {...seriesCharacterData, id: characterId}});
-                    }
-                }
+                characterId = await apiPost<string>(
+                    'series/character/add',
+                    {
+                        seriesId: entityId,
+                        character: {
+                            name: character.name,
+                            lastName: character.lastName || null,
+                            nickname: character.nickname || null,
+                            age: character.age || null,
+                            gender: character.gender || null,
+                            species: character.species || null,
+                            nationality: character.nationality || null,
+                            status: character.status || null,
+                            category: character.category,
+                            title: character.title || null,
+                            image: character.image || null,
+                            role: character.role || null,
+                            biography: character.biography || null,
+                            history: character.history || null,
+                            speechPattern: character.speechPattern || null,
+                            catchphrase: character.catchphrase || null,
+                            residence: character.residence || null,
+                            notes: character.notes || null,
+                            color: character.color || null,
+                        }
+                    },
+                    userToken,
+                    lang
+                );
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                characterId = await tauri.createCharacter(character, entityId);
             } else {
-                // Pattern A: mutations
-                const requestData = {
+                characterId = await apiPost<string>('character/add', {
                     bookId: entityId,
                     character: character,
-                };
-
-                if (isCurrentlyOffline() || book?.localBook) {
-                    // Offline OU livre local → Tauri
-                    characterId = await tauri.createCharacter(requestData.character, requestData.bookId, requestData.id);
-                } else {
-                    // Online + livre serveur → Server
-                    characterId = await System.authPostToServer<string>('character/add', requestData, userToken, lang);
-
-                    // Si le livre a une copie locale → addToQueue pour sync
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('create_character', {data: {...requestData, id: characterId}});
-                    }
-                }
+                }, userToken, lang);
             }
 
             if (!characterId) {
@@ -433,13 +374,12 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
             return false;
         }
     }
-
+    
     async function updateCharacterInternal(character: CharacterProps): Promise<boolean> {
         try {
             let response: boolean;
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const updateData = {
+                response = await apiPatch<boolean>('series/character/update', {
                     characterId: character.id,
                     character: {
                         id: character.id,
@@ -463,40 +403,20 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
                         notes: character.notes || null,
                         color: character.color || null,
                     }
-                };
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.updateSeriesCharacter(updateData);
-                } else {
-                    response = await System.authPatchToServer<boolean>('series/character/update', updateData, userToken, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('update_series_character', {data: updateData});
-                    }
-                }
+                }, userToken, lang);
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.updateCharacter(character);
             } else {
-                // Pattern A: mutations
-                const requestData = {
+                response = await apiPost<boolean>('character/update', {
                     character: character,
-                };
-
-                if (isCurrentlyOffline() || book?.localBook) {
-                    // Offline OU livre local → Tauri
-                    response = await tauri.updateCharacter(requestData.character);
-                } else {
-                    // Online + livre serveur → Server
-                    response = await System.authPostToServer<boolean>('character/update', requestData, userToken, lang);
-
-                    // Si le livre a une copie locale → addToQueue pour sync
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('update_character', {data: requestData});
-                    }
-                }
+                }, userToken, lang);
             }
 
             if (!response) {
                 errorMessage(t("characterComponent.errorUpdateCharacter"));
                 return false;
             }
-
+            
             setCharacters(function (prev: CharacterProps[]): CharacterProps[] {
                 return prev.map(function (c: CharacterProps): CharacterProps {
                     return c.id === character.id ? character : c;
@@ -514,45 +434,27 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
             return false;
         }
     }
-
+    
     const deleteCharacter = useCallback(async function (characterId: string): Promise<void> {
         try {
             let response: boolean;
-            const deletedAt: number = System.timeStampInSeconds();
-
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const requestData = {characterId, deletedAt};
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.deleteSeriesCharacter(requestData.characterId, requestData.deletedAt);
-                } else {
-                    response = await System.authDeleteToServer<boolean>('series/character/delete', requestData, userToken, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('delete_series_character', {data: requestData});
-                    }
-                }
+                response = await apiDelete<boolean>('series/character/delete', {
+                    characterId: characterId,
+                }, userToken, lang);
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.deleteCharacter(characterId, book?.bookId ?? '', Date.now());
             } else {
-                // Pattern A: mutations
-                const requestData = {characterId, bookId: entityId, deletedAt};
-                if (isCurrentlyOffline() || book?.localBook) {
-                    // Offline OU livre local → Tauri
-                    response = await tauri.deleteCharacter(requestData.characterId, requestData.bookId, requestData.deletedAt);
-                } else {
-                    // Online + livre serveur → Server
-                    response = await System.authDeleteToServer<boolean>('character/delete', requestData, userToken, lang);
-
-                    // Si le livre a une copie locale → addToQueue pour sync
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('delete_character', {data: requestData});
-                    }
-                }
+                response = await apiDelete<boolean>('character/delete', {
+                    characterId: characterId,
+                }, userToken, lang);
             }
-
+            
             if (!response) {
                 errorMessage(t("characterComponent.errorDeleteCharacter"));
                 return;
             }
-
+            
             setCharacters(function (prev: CharacterProps[]): CharacterProps[] {
                 return prev.filter(function (c: CharacterProps): boolean {
                     return c.id !== characterId;
@@ -567,62 +469,46 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
                 errorMessage(t("common.unknownError"));
             }
         }
-    }, [isSeriesMode, userToken, lang, errorMessage, successMessage, t, isCurrentlyOffline, book, addToQueue, localSyncedBooks, entityId]);
-
-    const addAttribute = useCallback(async function (section: keyof CharacterProps, value: Attribute): Promise<void> {
+    }, [isSeriesMode, userToken, lang, errorMessage, successMessage, t]);
+    
+    const addAttribute = useCallback(async function (section: CharacterAttributeSection, value: Attribute): Promise<void> {
         if (!selectedCharacter) return;
 
         if (selectedCharacter.id === null) {
             const updatedSection: Attribute[] = [
-                ...(selectedCharacter[section] as Attribute[]),
+                ...selectedCharacter[section],
                 value,
             ];
             setSelectedCharacter({...selectedCharacter, [section]: updatedSection});
         } else {
             try {
-                const requestData = {
-                    characterId: selectedCharacter.id,
-                    type: section,
-                    name: value.name,
-                };
-
                 let attributeId: string;
                 if (isSeriesMode) {
-                    // Series mode - dual logic
-                    if (isCurrentlyOffline() || localSeries) {
-                        attributeId = await tauri.addSeriesCharacterAttribute(requestData);
-                    } else {
-                        attributeId = await System.authPostToServer<string>('series/character/attribute/add', requestData, userToken, lang);
-                        if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                            addToQueue('add_series_character_attribute', {data: {...requestData, id: attributeId}});
-                        }
-                    }
+                    attributeId = await apiPost<string>('series/character/attribute/add', {
+                        characterId: selectedCharacter.id,
+                        type: section,
+                        name: value.name,
+                    }, userToken, lang);
+                } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                    attributeId = await tauri.addCharacterAttribute(selectedCharacter.id, section, value.name);
                 } else {
-                    // Pattern A: mutations
-                    if (isCurrentlyOffline() || book?.localBook) {
-                        // Offline OU livre local → Tauri
-                        attributeId = await tauri.addCharacterAttribute(requestData.characterId, requestData.type, requestData.name, requestData.id);
-                    } else {
-                        // Online + livre serveur → Server
-                        attributeId = await System.authPostToServer<string>('character/attribute/add', requestData, userToken, lang);
-
-                        // Si le livre a une copie locale → addToQueue pour sync
-                        if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                            addToQueue('add_character_attribute', {data: {...requestData, id: attributeId}});
-                        }
-                    }
+                    attributeId = await apiPost<string>('character/attribute/add', {
+                        characterId: selectedCharacter.id,
+                        type: section,
+                        name: value.name,
+                    }, userToken, lang);
                 }
-
+                
                 if (!attributeId) {
                     errorMessage(t("characterComponent.errorAddAttribute"));
                     return;
                 }
-
+                
                 const newValue: Attribute = {
                     name: value.name,
                     id: attributeId,
                 };
-                const updatedSection: Attribute[] = [...(selectedCharacter[section] as Attribute[]), newValue];
+                const updatedSection: Attribute[] = [...selectedCharacter[section], newValue];
                 setSelectedCharacter({...selectedCharacter, [section]: updatedSection});
             } catch (e: unknown) {
                 if (e instanceof Error) {
@@ -632,59 +518,37 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
                 }
             }
         }
-    }, [selectedCharacter, isSeriesMode, userToken, lang, errorMessage, t, isCurrentlyOffline, book, addToQueue, localSyncedBooks, entityId]);
-
-    const removeAttribute = useCallback(async function (section: keyof CharacterProps, index: number, attrId: string): Promise<void> {
+    }, [selectedCharacter, isSeriesMode, userToken, lang, errorMessage, t]);
+    
+    const removeAttribute = useCallback(async function (section: CharacterAttributeSection, index: number, attrId: string): Promise<void> {
         if (!selectedCharacter) return;
 
         if (selectedCharacter.id === null) {
-            const updatedSection: Attribute[] = (
-                selectedCharacter[section] as Attribute[]
-            ).filter(function (_: Attribute, i: number): boolean {
+            const updatedSection: Attribute[] = selectedCharacter[section].filter(function (_: Attribute, i: number): boolean {
                 return i !== index;
             });
             setSelectedCharacter({...selectedCharacter, [section]: updatedSection});
         } else {
             try {
-                const deletedAt: number = System.timeStampInSeconds();
-
                 let response: boolean;
                 if (isSeriesMode) {
-                    // Series mode - dual logic
-                    const requestData = {attributeId: attrId, deletedAt};
-                    if (isCurrentlyOffline() || localSeries) {
-                        response = await tauri.deleteSeriesCharacterAttribute(requestData.attributeId, requestData.deletedAt);
-                    } else {
-                        response = await System.authDeleteToServer<boolean>('series/character/attribute/delete', requestData, userToken, lang);
-                        if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                            addToQueue('delete_series_character_attribute', {data: requestData});
-                        }
-                    }
+                    response = await apiDelete<boolean>('series/character/attribute/delete', {
+                        attributeId: attrId,
+                    }, userToken, lang);
+                } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                    response = await tauri.deleteCharacterAttribute(attrId, book?.bookId ?? '', Date.now());
                 } else {
-                    // Pattern A: mutations
-                    const requestData = {attributeId: attrId, bookId: entityId, deletedAt};
-                    if (isCurrentlyOffline() || book?.localBook) {
-                        // Offline OU livre local → Tauri
-                        response = await tauri.deleteCharacterAttribute(requestData.attributeId, requestData.bookId, requestData.deletedAt);
-                    } else {
-                        // Online + livre serveur → Server
-                        response = await System.authDeleteToServer<boolean>('character/attribute/delete', requestData, userToken, lang);
-
-                        // Si le livre a une copie locale → addToQueue pour sync
-                        if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                            addToQueue('delete_character_attribute', {data: requestData});
-                        }
-                    }
+                    response = await apiDelete<boolean>('character/attribute/delete', {
+                        attributeId: attrId,
+                    }, userToken, lang);
                 }
-
+                
                 if (!response) {
                     errorMessage(t("characterComponent.errorRemoveAttribute"));
                     return;
                 }
-
-                const updatedSection: Attribute[] = (
-                    selectedCharacter[section] as Attribute[]
-                ).filter(function (_: Attribute, i: number): boolean {
+                
+                const updatedSection: Attribute[] = selectedCharacter[section].filter(function (_: Attribute, i: number): boolean {
                     return i !== index;
                 });
                 setSelectedCharacter({...selectedCharacter, [section]: updatedSection});
@@ -696,76 +560,50 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
                 }
             }
         }
-    }, [selectedCharacter, isSeriesMode, userToken, lang, errorMessage, t, isCurrentlyOffline, book, addToQueue, localSyncedBooks, entityId]);
-
+    }, [selectedCharacter, isSeriesMode, userToken, lang, errorMessage, t]);
+    
     const exportToSeries = useCallback(async function (): Promise<void> {
         if (!selectedCharacter || !bookSeriesId) return;
-
+        
         try {
-            const seriesCharacterData = {
-                seriesId: bookSeriesId,
-                character: {
-                    name: selectedCharacter.name,
-                    lastName: selectedCharacter.lastName || null,
-                    nickname: selectedCharacter.nickname || null,
-                    age: selectedCharacter.age || null,
-                    gender: selectedCharacter.gender || null,
-                    species: selectedCharacter.species || null,
-                    nationality: selectedCharacter.nationality || null,
-                    status: selectedCharacter.status || null,
-                    category: selectedCharacter.category,
-                    title: selectedCharacter.title || null,
-                    image: selectedCharacter.image || null,
-                    role: selectedCharacter.role || null,
-                    biography: selectedCharacter.biography || null,
-                    history: selectedCharacter.history || null,
-                    speechPattern: selectedCharacter.speechPattern || null,
-                    catchphrase: selectedCharacter.catchphrase || null,
-                    residence: selectedCharacter.residence || null,
-                    notes: selectedCharacter.notes || null,
-                    color: selectedCharacter.color || null,
-                }
-            };
-
-            let seriesCharacterId: string;
-            if (isCurrentlyOffline() || book?.localBook) {
-                // Mode offline ou livre local → Tauri
-                seriesCharacterId = await tauri.addSeriesCharacter(seriesCharacterData);
-            } else {
-                // Mode online → Serveur
-                seriesCharacterId = await System.authPostToServer<string>(
-                    'series/character/add',
-                    seriesCharacterData,
-                    userToken,
-                    lang
-                );
-                // Si la série a une copie locale → addToQueue
-                if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === bookSeriesId)) {
-                    addToQueue('add_series_character', {data: {...seriesCharacterData, id: seriesCharacterId}});
-                }
-            }
-
+            const seriesCharacterId: string = await apiPost<string>(
+                'series/character/add',
+                {
+                    seriesId: bookSeriesId,
+                    character: {
+                        name: selectedCharacter.name,
+                        lastName: selectedCharacter.lastName || null,
+                        nickname: selectedCharacter.nickname || null,
+                        age: selectedCharacter.age || null,
+                        gender: selectedCharacter.gender || null,
+                        species: selectedCharacter.species || null,
+                        nationality: selectedCharacter.nationality || null,
+                        status: selectedCharacter.status || null,
+                        category: selectedCharacter.category,
+                        title: selectedCharacter.title || null,
+                        image: selectedCharacter.image || null,
+                        role: selectedCharacter.role || null,
+                        biography: selectedCharacter.biography || null,
+                        history: selectedCharacter.history || null,
+                        speechPattern: selectedCharacter.speechPattern || null,
+                        catchphrase: selectedCharacter.catchphrase || null,
+                        residence: selectedCharacter.residence || null,
+                        notes: selectedCharacter.notes || null,
+                        color: selectedCharacter.color || null,
+                    }
+                },
+                userToken,
+                lang
+            );
+            
             if (seriesCharacterId) {
-                const updateData = {
+                const updateResponse: boolean = await apiPost<boolean>('character/update', {
                     character: {
                         ...selectedCharacter,
                         seriesCharacterId: seriesCharacterId
                     },
-                };
-
-                let updateResponse: boolean;
-                if (isCurrentlyOffline() || book?.localBook) {
-                    // Mode offline ou livre local → Tauri
-                    updateResponse = await tauri.updateCharacter(updateData.character);
-                } else {
-                    // Mode online → Serveur
-                    updateResponse = await System.authPostToServer<boolean>('character/update', updateData, userToken, lang);
-                    // Si le livre a une copie locale → addToQueue
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('update_character', {data: updateData});
-                    }
-                }
-
+                }, userToken, lang);
+                
                 if (updateResponse) {
                     setSelectedCharacter({...selectedCharacter, seriesCharacterId: seriesCharacterId});
                     setCharacters(function (prev: CharacterProps[]): CharacterProps[] {
@@ -806,14 +644,14 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
                 errorMessage(e.message);
             }
         }
-    }, [selectedCharacter, bookSeriesId, userToken, lang, successMessage, errorMessage, t, isCurrentlyOffline, book, addToQueue, localSyncedBooks, localSyncedSeries, entityId]);
-
+    }, [selectedCharacter, bookSeriesId, userToken, lang, successMessage, errorMessage, t]);
+    
     const importFromSeries = useCallback(async function (seriesCharacterId: string): Promise<void> {
-        const seriesChar = seriesCharacters.find(function (c: SeriesCharacterProps): boolean {
+        const seriesChar: SeriesCharacterProps | undefined = seriesCharacters.find(function (c: SeriesCharacterProps): boolean {
             return c.id === seriesCharacterId;
         });
         if (!seriesChar) return;
-
+        
         try {
             const characterToImport: CharacterProps = {
                 id: null,
@@ -824,8 +662,8 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
                 gender: seriesChar.gender || '',
                 species: seriesChar.species || '',
                 nationality: seriesChar.nationality || '',
-                status: (seriesChar.status as 'alive' | 'dead' | 'unknown') || 'alive',
-                category: (seriesChar.category as CharacterProps['category']) || 'none',
+                status: seriesChar.status && isCharacterStatus(seriesChar.status) ? seriesChar.status : 'alive',
+                category: isCharacterCategory(seriesChar.category) ? seriesChar.category : 'none',
                 title: seriesChar.title || '',
                 role: seriesChar.role || '',
                 image: seriesChar.image || 'https://via.placeholder.com/150',
@@ -856,30 +694,22 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
                 affiliations: [],
                 seriesCharacterId: seriesCharacterId,
             };
-
-            const requestData = {
-                bookId: entityId,
-                character: characterToImport,
-            };
-
+            
             let characterId: string;
-            if (isCurrentlyOffline() || book?.localBook) {
-                // Mode offline ou livre local → Tauri
-                characterId = await tauri.createCharacter(requestData.character, requestData.bookId, requestData.id);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                characterId = await tauri.createCharacter(characterToImport, entityId);
             } else {
-                // Mode online → Serveur
-                characterId = await System.authPostToServer<string>('character/add', requestData, userToken, lang);
-                // Si le livre a une copie locale → addToQueue
-                if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                    addToQueue('create_character', {data: {...requestData, id: characterId}});
-                }
+                characterId = await apiPost<string>('character/add', {
+                    bookId: entityId,
+                    character: characterToImport,
+                }, userToken, lang);
             }
-
+            
             if (!characterId) {
                 errorMessage(t("characterComponent.importError"));
                 return;
             }
-
+            
             characterToImport.id = characterId;
             setCharacters(function (prev: CharacterProps[]): CharacterProps[] {
                 return [...prev, characterToImport];
@@ -889,29 +719,26 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
                 errorMessage(e.message);
             }
         }
-    }, [seriesCharacters, entityId, userToken, lang, errorMessage, successMessage, t, isCurrentlyOffline, book, addToQueue, localSyncedBooks]);
-
+    }, [seriesCharacters, entityId, userToken, lang, errorMessage, successMessage, t]);
+    
     // Navigation functions
     const enterDetailMode = useCallback(function (character: CharacterProps): void {
         setSelectedCharacter({...character});
         setViewMode('detail');
         setCharacterBackup(null);
     }, []);
-
+    
     const enterEditMode = useCallback(function (): void {
         if (selectedCharacter) {
             setCharacterBackup({...selectedCharacter});
         }
         setViewMode('edit');
     }, [selectedCharacter]);
-
+    
     const exitEditMode = useCallback(async function (save: boolean): Promise<void> {
         if (save) {
             const success: boolean = await saveCharacter();
-            if (!success) {
-                // Stay in edit mode on error
-                return;
-            }
+            if (!success) return;
             if (characterBackup) {
                 setViewMode('detail');
             } else {
@@ -928,13 +755,13 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
         }
         setCharacterBackup(null);
     }, [saveCharacter, characterBackup]);
-
+    
     const backToList = useCallback(function (): void {
         setSelectedCharacter(null);
         setCharacterBackup(null);
         setViewMode('list');
     }, []);
-
+    
     return {
         // State
         characters,
@@ -944,11 +771,11 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
         isLoading,
         isSeriesMode,
         bookSeriesId,
-
+        
         // Navigation state
         viewMode,
         characterBackup,
-
+        
         // Actions
         selectCharacter,
         addNewCharacter,
@@ -964,7 +791,7 @@ export function useCharacters(config: UseCharactersConfig): UseCharactersReturn
         refreshCharacters,
         refreshSeriesCharacters,
         setSelectedCharacter,
-
+        
         // Navigation actions
         enterDetailMode,
         enterEditMode,
diff --git a/hooks/settings/useLocations.ts b/hooks/settings/useLocations.ts
index 7269018..823e247 100644
--- a/hooks/settings/useLocations.ts
+++ b/hooks/settings/useLocations.ts
@@ -1,21 +1,16 @@
 'use client'
 import {useCallback, useContext, useEffect, useState} from 'react';
-import {SeriesLocationItem, SeriesLocationElement, SeriesLocationSubElement} from '@/lib/models/Series';
-import {SessionContext} from '@/context/SessionContext';
-import {BookContext} from '@/context/BookContext';
-import {AlertContext} from '@/context/AlertContext';
+import {SeriesLocationElement, SeriesLocationItem, SeriesLocationSubElement} from '@/lib/types/series';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
 import {LangContext, LangContextProps} from '@/context/LangContext';
-import System from '@/lib/models/System';
-import {useTranslations} from 'next-intl';
-import {ViewMode} from '@/shared/interface';
-import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from '@/context/SyncQueueContext';
-import {BooksSyncContext, BooksSyncContextProps} from '@/context/BooksSyncContext';
-import {SyncedBook} from '@/lib/models/SyncedBook';
-import {SeriesContext, SeriesContextProps} from '@/context/SeriesContext';
-import {SeriesSyncContext, SeriesSyncContextProps} from '@/context/SeriesSyncContext';
-import {SyncedSeries} from '@/lib/models/SyncedSeries';
+import {apiDelete, apiGet, apiPatch, apiPost} from '@/lib/api/client';
+import {useTranslations} from '@/lib/i18n';
+import {ViewMode} from '@/lib/types/settings';
+import {isDesktop} from '@/lib/configs';
 import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
 
 export interface SubElement {
     id: string;
@@ -58,12 +53,12 @@ export interface UseLocationsReturn {
     newSectionName: string;
     newElementNames: { [key: string]: string };
     newSubElementNames: { [key: string]: string };
-
+    
     // Navigation state
     viewMode: ViewMode;
     selectedSectionIndex: number;
     sectionsBackup: LocationProps[] | null;
-
+    
     // Actions
     addSection: () => Promise<void>;
     addElement: (sectionId: string) => Promise<void>;
@@ -73,7 +68,7 @@ export interface UseLocationsReturn {
     removeSubElement: (sectionId: string, elementIndex: number, subElementIndex: number) => Promise<void>;
     updateElement: (sectionId: string, elementIndex: number, field: keyof Element, value: string) => void;
     updateSubElement: (sectionId: string, elementIndex: number, subElementIndex: number, field: keyof SubElement, value: string) => void;
-    saveLocations: () => Promise<boolean>;
+    saveLocations: () => Promise<void>;
     toggleTool: (enabled: boolean) => Promise<void>;
     importFromSeries: (seriesLocationId: string) => Promise<void>;
     exportToSeries: (section: LocationProps) => Promise<void>;
@@ -82,7 +77,7 @@ export interface UseLocationsReturn {
     setNewSectionName: (name: string) => void;
     setNewElementNames: React.Dispatch<React.SetStateAction<{ [key: string]: string }>>;
     setNewSubElementNames: React.Dispatch<React.SetStateAction<{ [key: string]: string }>>;
-
+    
     // Navigation actions
     enterDetailMode: (sectionIndex: number) => void;
     enterEditMode: () => void;
@@ -93,16 +88,12 @@ export interface UseLocationsReturn {
 export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
     const {entityType, entityId} = config;
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {session} = useContext(SessionContext);
-    const {book, setBook} = useContext(BookContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {localSeries} = useContext<SeriesContextProps>(SeriesContext);
-    const {localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
-
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {book, setBook}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
+    
     const [sections, setSections] = useState<LocationProps[]>([]);
     const [seriesLocations, setSeriesLocations] = useState<SeriesLocationItem[]>([]);
     const [toolEnabled, setToolEnabled] = useState<boolean>(entityType === 'series' || (book?.tools?.locations ?? false));
@@ -110,74 +101,59 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
     const [newSectionName, setNewSectionName] = useState<string>('');
     const [newElementNames, setNewElementNames] = useState<{ [key: string]: string }>({});
     const [newSubElementNames, setNewSubElementNames] = useState<{ [key: string]: string }>({});
-    const [isAddingElement, setIsAddingElement] = useState<boolean>(false);
-    const [isAddingSubElement, setIsAddingSubElement] = useState<boolean>(false);
-    const [isAddingSection, setIsAddingSection] = useState<boolean>(false);
-
+    
     // Navigation state
     const [viewMode, setViewMode] = useState<ViewMode>('list');
     const [selectedSectionIndex, setSelectedSectionIndex] = useState<number>(-1);
     const [sectionsBackup, setSectionsBackup] = useState<LocationProps[] | null>(null);
-
+    
     const isSeriesMode: boolean = entityType === 'series';
     const bookSeriesId: string | null = book?.seriesId || null;
     const userToken: string = session?.accessToken || '';
-
+    
     // Load locations on mount
     useEffect(function (): void {
         if (entityId) {
             refreshLocations();
         }
     }, [entityId]);
-
+    
     // Load series locations for book mode
     useEffect(function (): void {
         if (bookSeriesId && !isSeriesMode) {
             refreshSeriesLocations();
         }
     }, [bookSeriesId, isSeriesMode]);
-
+    
     const refreshSeriesLocations = useCallback(async function (): Promise<void> {
         if (!bookSeriesId) return;
         try {
-            let response: SeriesLocationItem[];
-            // Dual logic: offline ou livre local → IPC, sinon serveur
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getSeriesLocationList(bookSeriesId);
-            } else {
-                response = await System.authGetQueryToServer<SeriesLocationItem[]>(
-                    'series/location/list',
-                    userToken,
-                    lang,
-                    {seriesid: bookSeriesId}
-                );
-            }
+            const response: SeriesLocationItem[] = await apiGet<SeriesLocationItem[]>(
+                'series/location/list',
+                userToken,
+                lang,
+                {seriesid: bookSeriesId}
+            );
             if (response) {
                 setSeriesLocations(response);
             }
         } catch (e: unknown) {
             if (e instanceof Error) {
-                console.error('Error loading series locations:', e.message);
+                errorMessage(e.message);
             }
         }
-    }, [bookSeriesId, userToken, lang, isCurrentlyOffline, book?.localBook]);
-
+    }, [bookSeriesId, userToken, lang]);
+    
     const refreshLocations = useCallback(async function (): Promise<void> {
         setIsLoading(true);
         try {
             if (isSeriesMode) {
-                // Series mode - dual logic
-                let response: SeriesLocationItem[];
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.getSeriesLocationList(entityId);
-                } else {
-                    response = await System.authGetQueryToServer<SeriesLocationItem[]>(
-                        'series/location/list',
-                        userToken,
-                        lang,
-                        {seriesid: entityId}
-                    );
-                }
+                const response: SeriesLocationItem[] = await apiGet<SeriesLocationItem[]>(
+                    'series/location/list',
+                    userToken,
+                    lang,
+                    {seriesid: entityId}
+                );
                 if (response) {
                     const mappedLocations: LocationProps[] = response.map(function (loc: SeriesLocationItem): LocationProps {
                         return {
@@ -203,17 +179,12 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
                 }
             } else {
                 let response: LocationListResponse;
-                if (isCurrentlyOffline()) {
-                    response = await tauri.getAllLocations(entityId, true) as unknown as LocationListResponse;
-                } else if (book?.localBook) {
-                    response = await tauri.getAllLocations(entityId, true) as unknown as LocationListResponse;
+                if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                    response = await tauri.getAllLocations(entityId, book?.tools?.locations ?? false) as LocationListResponse;
                 } else {
-                    response = await System.authGetQueryToServer<LocationListResponse>(
-                        'location/all',
-                        userToken,
-                        lang,
-                        {bookid: entityId}
-                    );
+                    response = await apiGet<LocationListResponse>('location/all', userToken, lang, {
+                        bookid: entityId
+                    });
                 }
                 if (response) {
                     setSections(response.locations);
@@ -240,25 +211,20 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
         } finally {
             setIsLoading(false);
         }
-    }, [entityId, isSeriesMode, userToken, lang, book, setBook, errorMessage, t, isCurrentlyOffline]);
-
+    }, [entityId, isSeriesMode, userToken, lang, book, setBook, errorMessage, t]);
+    
     const toggleTool = useCallback(async function (enabled: boolean): Promise<void> {
         if (isSeriesMode) return;
         try {
-            const requestData = {
-                bookId: book?.bookId,
-                toolName: 'locations',
-                enabled: enabled
-            };
             let response: boolean;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.updateBookToolSetting(requestData.bookId!, requestData.toolName, requestData.enabled);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.updateBookToolSetting(book?.bookId ?? '', 'locations', enabled);
             } else {
-                response = await System.authPatchToServer<boolean>('book/tool-setting', requestData, userToken, lang);
-
-                if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === book?.bookId)) {
-                    addToQueue('update_book_tool_setting', {data: requestData});
-                }
+                response = await apiPatch<boolean>('book/tool-setting', {
+                    bookId: book?.bookId,
+                    toolName: 'locations',
+                    enabled: enabled
+                }, userToken, lang);
             }
             if (response && setBook && book) {
                 setToolEnabled(enabled);
@@ -277,54 +243,40 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
                 errorMessage(e.message);
             }
         }
-    }, [isSeriesMode, book, setBook, userToken, lang, errorMessage, isCurrentlyOffline, addToQueue, localSyncedBooks]);
-
+    }, [isSeriesMode, book, setBook, userToken, lang, errorMessage]);
+    
     const addSection = useCallback(async function (): Promise<void> {
-        if (isAddingSection) return;
         if (!newSectionName.trim()) {
             errorMessage(t('locationComponent.errorSectionNameEmpty'));
             return;
         }
-        setIsAddingSection(true);
         try {
             let sectionId: string;
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const addData = {
-                    seriesId: entityId,
-                    name: newSectionName,
-                };
-                if (isCurrentlyOffline() || localSeries) {
-                    sectionId = await tauri.addSeriesLocationSection(addData);
-                } else {
-                    sectionId = await System.authPostToServer<string>(
-                        'series/location/section/add',
-                        addData,
-                        userToken,
-                        lang
-                    );
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('add_series_location_section', {data: {...addData, id: sectionId}});
-                    }
+                sectionId = await apiPost<string>(
+                    'series/location/section/add',
+                    {
+                        seriesId: entityId,
+                        name: newSectionName,
+                    },
+                    userToken,
+                    lang
+                );
+                if (!sectionId) {
+                    errorMessage(t('locationComponent.errorUnknownAddSection'));
+                    return;
                 }
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                sectionId = await tauri.addLocationSection(newSectionName, entityId);
                 if (!sectionId) {
                     errorMessage(t('locationComponent.errorUnknownAddSection'));
                     return;
                 }
             } else {
-                const requestData = {
+                sectionId = await apiPost<string>('location/section/add', {
                     bookId: entityId,
                     locationName: newSectionName,
-                };
-                if (isCurrentlyOffline() || book?.localBook) {
-                    sectionId = await tauri.addLocationSection(requestData.locationName, requestData.bookId, undefined, undefined);
-                } else {
-                    sectionId = await System.authPostToServer<string>('location/section/add', requestData, userToken, lang);
-
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('add_location_section', {data: {...requestData, id: sectionId}});
-                    }
-                }
+                }, userToken, lang);
                 if (!sectionId) {
                     errorMessage(t('locationComponent.errorUnknownAddSection'));
                     return;
@@ -345,58 +297,42 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
             } else {
                 errorMessage(t('locationComponent.errorUnknownAddSection'));
             }
-        } finally {
-            setIsAddingSection(false);
         }
-    }, [newSectionName, isSeriesMode, entityId, userToken, lang, errorMessage, t, isCurrentlyOffline, addToQueue, localSyncedBooks, book, isAddingSection]);
-
+    }, [newSectionName, isSeriesMode, entityId, userToken, lang, errorMessage, t]);
+    
     const addElement = useCallback(async function (sectionId: string): Promise<void> {
-        if (isAddingElement) return;
         if (!newElementNames[sectionId]?.trim()) {
             errorMessage(t('locationComponent.errorElementNameEmpty'));
             return;
         }
-        setIsAddingElement(true);
         try {
             let elementId: string;
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const addData = {
-                    locationId: sectionId,
-                    name: newElementNames[sectionId],
-                };
-                if (isCurrentlyOffline() || localSeries) {
-                    elementId = await tauri.addSeriesLocationElement(addData);
-                } else {
-                    elementId = await System.authPostToServer<string>(
-                        'series/location/element/add',
-                        addData,
-                        userToken,
-                        lang
-                    );
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('add_series_location_element', {data: {...addData, id: elementId}});
-                    }
+                elementId = await apiPost<string>(
+                    'series/location/element/add',
+                    {
+                        locationId: sectionId,
+                        name: newElementNames[sectionId],
+                    },
+                    userToken,
+                    lang
+                );
+                if (!elementId) {
+                    errorMessage(t('locationComponent.errorUnknownAddElement'));
+                    return;
                 }
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                elementId = await tauri.addLocationElement(sectionId, newElementNames[sectionId]);
                 if (!elementId) {
                     errorMessage(t('locationComponent.errorUnknownAddElement'));
                     return;
                 }
             } else {
-                const requestData = {
+                elementId = await apiPost<string>('location/element/add', {
                     bookId: entityId,
                     locationId: sectionId,
                     elementName: newElementNames[sectionId],
-                };
-                if (isCurrentlyOffline() || book?.localBook) {
-                    elementId = await tauri.addLocationElement(requestData.locationId, requestData.elementName, undefined);
-                } else {
-                    elementId = await System.authPostToServer<string>('location/element/add', requestData, userToken, lang);
-
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('add_location_element', {data: {...requestData, id: elementId}});
-                    }
-                }
+                }, userToken, lang);
                 if (!elementId) {
                     errorMessage(t('locationComponent.errorUnknownAddElement'));
                     return;
@@ -424,60 +360,44 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
             } else {
                 errorMessage(t('locationComponent.errorUnknownAddElement'));
             }
-        } finally {
-            setIsAddingElement(false);
         }
-    }, [newElementNames, isSeriesMode, entityId, userToken, lang, errorMessage, t, isCurrentlyOffline, addToQueue, localSyncedBooks, book, isAddingElement]);
-
+    }, [newElementNames, isSeriesMode, entityId, userToken, lang, errorMessage, t]);
+    
     const addSubElement = useCallback(async function (sectionId: string, elementIndex: number): Promise<void> {
-        if (isAddingSubElement) return;
         if (!newSubElementNames[elementIndex]?.trim()) {
             errorMessage(t('locationComponent.errorSubElementNameEmpty'));
             return;
         }
-        setIsAddingSubElement(true);
         const sectionIndex: number = sections.findIndex(function (section: LocationProps): boolean {
             return section.id === sectionId;
         });
         try {
             let subElementId: string;
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const addData = {
-                    elementId: sections[sectionIndex].elements[elementIndex].id,
-                    name: newSubElementNames[elementIndex],
-                };
-                if (isCurrentlyOffline() || localSeries) {
-                    subElementId = await tauri.addSeriesLocationSubElement(addData);
-                } else {
-                    subElementId = await System.authPostToServer<string>(
-                        'series/location/sub-element/add',
-                        addData,
-                        userToken,
-                        lang
-                    );
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('add_series_location_sub_element', {data: {...addData, id: subElementId}});
-                    }
+                subElementId = await apiPost<string>(
+                    'series/location/sub-element/add',
+                    {
+                        elementId: sections[sectionIndex].elements[elementIndex].id,
+                        name: newSubElementNames[elementIndex],
+                    },
+                    userToken,
+                    lang
+                );
+                if (!subElementId) {
+                    errorMessage(t('locationComponent.errorUnknownAddSubElement'));
+                    return;
                 }
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                subElementId = await tauri.addLocationSubElement(sections[sectionIndex].elements[elementIndex].id, newSubElementNames[elementIndex]);
                 if (!subElementId) {
                     errorMessage(t('locationComponent.errorUnknownAddSubElement'));
                     return;
                 }
             } else {
-                const requestData = {
+                subElementId = await apiPost<string>('location/sub-element/add', {
                     elementId: sections[sectionIndex].elements[elementIndex].id,
                     subElementName: newSubElementNames[elementIndex],
-                };
-                if (isCurrentlyOffline() || book?.localBook) {
-                    subElementId = await tauri.addLocationSubElement(requestData.elementId, requestData.subElementName, undefined);
-                } else {
-                    subElementId = await System.authPostToServer<string>('location/sub-element/add', requestData, userToken, lang);
-
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('add_location_sub_element', {data: {...requestData, id: subElementId}});
-                    }
-                }
+                }, userToken, lang);
                 if (!subElementId) {
                     errorMessage(t('locationComponent.errorUnknownAddSubElement'));
                     return;
@@ -501,39 +421,22 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
             } else {
                 errorMessage(t('locationComponent.errorUnknownAddSubElement'));
             }
-        } finally {
-            setIsAddingSubElement(false);
         }
-    }, [sections, newSubElementNames, isSeriesMode, userToken, lang, errorMessage, t, isCurrentlyOffline, addToQueue, localSyncedBooks, entityId, book, isAddingSubElement]);
-
+    }, [sections, newSubElementNames, isSeriesMode, userToken, lang, errorMessage, t]);
+    
     const removeSection = useCallback(async function (sectionId: string): Promise<void> {
         try {
             let success: boolean;
-            const deletedAt: number = System.timeStampInSeconds();
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const deleteData = {locationId: sectionId, deletedAt};
-                if (isCurrentlyOffline() || localSeries) {
-                    success = await tauri.deleteSeriesLocation(deleteData.locationId, deleteData.deletedAt);
-                } else {
-                    success = await System.authDeleteToServer<boolean>('series/location/delete', deleteData, userToken, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('delete_series_location', {data: deleteData});
-                    }
-                }
+                success = await apiDelete<boolean>('series/location/delete', {
+                    locationId: sectionId
+                }, userToken, lang);
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                success = await tauri.deleteLocationSection(sectionId, book?.bookId ?? '', Date.now());
             } else {
-                const requestData = {
-                    locationId: sectionId, bookId: entityId, deletedAt,
-                };
-                if (isCurrentlyOffline() || book?.localBook) {
-                    success = await tauri.deleteLocationSection(requestData.locationId, requestData.bookId, requestData.deletedAt);
-                } else {
-                    success = await System.authDeleteToServer<boolean>('location/delete', requestData, userToken, lang);
-
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('delete_location_section', {data: requestData});
-                    }
-                }
+                success = await apiDelete<boolean>('location/delete', {
+                    locationId: sectionId,
+                }, userToken, lang);
             }
             if (!success) {
                 errorMessage(t('locationComponent.errorUnknownDeleteSection'));
@@ -551,39 +454,24 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
                 errorMessage(t('locationComponent.errorUnknownDeleteSection'));
             }
         }
-    }, [isSeriesMode, userToken, lang, errorMessage, t, isCurrentlyOffline, addToQueue, localSyncedBooks, entityId, book]);
-
+    }, [isSeriesMode, userToken, lang, errorMessage, t]);
+    
     const removeElement = useCallback(async function (sectionId: string, elementIndex: number): Promise<void> {
         try {
             const elementId: string | undefined = sections.find(function (section: LocationProps): boolean {
                 return section.id === sectionId;
             })?.elements[elementIndex].id;
             let success: boolean;
-            const deletedAt: number = System.timeStampInSeconds();
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const deleteData = {elementId, deletedAt};
-                if (isCurrentlyOffline() || localSeries) {
-                    success = await tauri.deleteSeriesLocationElement(deleteData.elementId!, deleteData.deletedAt);
-                } else {
-                    success = await System.authDeleteToServer<boolean>('series/location/element/delete', deleteData, userToken, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('delete_series_location_element', {data: deleteData});
-                    }
-                }
+                success = await apiDelete<boolean>('series/location/element/delete', {
+                    elementId: elementId
+                }, userToken, lang);
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                success = await tauri.deleteLocationElement(elementId ?? '', book?.bookId ?? '', Date.now());
             } else {
-                const requestData = {
-                    elementId, bookId: entityId, deletedAt,
-                };
-                if (isCurrentlyOffline() || book?.localBook) {
-                    success = await tauri.deleteLocationElement(requestData.elementId!, requestData.bookId, requestData.deletedAt);
-                } else {
-                    success = await System.authDeleteToServer<boolean>('location/element/delete', requestData, userToken, lang);
-
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('delete_location_element', {data: requestData});
-                    }
-                }
+                success = await apiDelete<boolean>('location/element/delete', {
+                    elementId: elementId,
+                }, userToken, lang);
             }
             if (!success) {
                 errorMessage(t('locationComponent.errorUnknownDeleteElement'));
@@ -604,39 +492,24 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
                 errorMessage(t('locationComponent.errorUnknownDeleteElement'));
             }
         }
-    }, [sections, isSeriesMode, userToken, lang, errorMessage, t, isCurrentlyOffline, addToQueue, localSyncedBooks, entityId, book]);
-
+    }, [sections, isSeriesMode, userToken, lang, errorMessage, t]);
+    
     const removeSubElement = useCallback(async function (sectionId: string, elementIndex: number, subElementIndex: number): Promise<void> {
         try {
             const subElementId: string | undefined = sections.find(function (section: LocationProps): boolean {
                 return section.id === sectionId;
             })?.elements[elementIndex].subElements[subElementIndex].id;
             let success: boolean;
-            const deletedAt: number = System.timeStampInSeconds();
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const deleteData = {subElementId, deletedAt};
-                if (isCurrentlyOffline() || localSeries) {
-                    success = await tauri.deleteSeriesLocationSubElement(deleteData.subElementId!, deleteData.deletedAt);
-                } else {
-                    success = await System.authDeleteToServer<boolean>('series/location/sub-element/delete', deleteData, userToken, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('delete_series_location_sub_element', {data: deleteData});
-                    }
-                }
+                success = await apiDelete<boolean>('series/location/sub-element/delete', {
+                    subElementId: subElementId
+                }, userToken, lang);
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                success = await tauri.deleteLocationSubElement(subElementId ?? '', book?.bookId ?? '', Date.now());
             } else {
-                const requestData = {
-                    subElementId, bookId: entityId, deletedAt,
-                };
-                if (isCurrentlyOffline() || book?.localBook) {
-                    success = await tauri.deleteLocationSubElement(requestData.subElementId!, requestData.bookId, requestData.deletedAt);
-                } else {
-                    success = await System.authDeleteToServer<boolean>('location/sub-element/delete', requestData, userToken, lang);
-
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('delete_location_sub_element', {data: requestData});
-                    }
-                }
+                success = await apiDelete<boolean>('location/sub-element/delete', {
+                    subElementId: subElementId,
+                }, userToken, lang);
             }
             if (!success) {
                 errorMessage(t('locationComponent.errorUnknownDeleteSubElement'));
@@ -657,8 +530,8 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
                 errorMessage(t('locationComponent.errorUnknownDeleteSubElement'));
             }
         }
-    }, [sections, isSeriesMode, userToken, lang, errorMessage, t, isCurrentlyOffline, addToQueue, localSyncedBooks, entityId, book]);
-
+    }, [sections, isSeriesMode, userToken, lang, errorMessage, t]);
+    
     const updateElement = useCallback(function (sectionId: string, elementIndex: number, field: keyof Element, value: string): void {
         setSections(function (prev: LocationProps[]): LocationProps[] {
             const updated: LocationProps[] = [...prev];
@@ -670,7 +543,7 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
             return updated;
         });
     }, []);
-
+    
     const updateSubElement = useCallback(function (sectionId: string, elementIndex: number, subElementIndex: number, field: keyof SubElement, value: string): void {
         setSections(function (prev: LocationProps[]): LocationProps[] {
             const updated: LocationProps[] = [...prev];
@@ -681,80 +554,47 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
             return updated;
         });
     }, []);
-
-    const saveLocations = useCallback(async function (): Promise<boolean> {
+    
+    const saveLocations = useCallback(async function (): Promise<void> {
         try {
-            const requestData = {
-                locations: sections,
-            };
             let response: boolean;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.updateLocations(requestData.locations);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.updateLocations(sections) as boolean;
             } else {
-                response = await System.authPostToServer<boolean>('location/update', requestData, userToken, lang);
-
-                if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                    addToQueue('update_locations', {data: requestData});
-                }
+                response = await apiPost<boolean>('location/update', {
+                    locations: sections,
+                }, userToken, lang);
             }
             if (!response) {
                 errorMessage(t('locationComponent.errorUnknownSave'));
-                return false;
+                return;
             }
             successMessage(t('locationComponent.successSave'));
-            return true;
         } catch (e: unknown) {
             if (e instanceof Error) {
                 errorMessage(e.message);
             } else {
                 errorMessage(t('locationComponent.errorUnknownSave'));
             }
-            return false;
         }
-    }, [sections, userToken, lang, errorMessage, successMessage, t, isCurrentlyOffline, addToQueue, localSyncedBooks, entityId, book]);
-
+    }, [sections, userToken, lang, errorMessage, successMessage, t]);
+    
     const exportToSeries = useCallback(async function (section: LocationProps): Promise<void> {
         if (!bookSeriesId) return;
-
+        
         try {
-            const seriesLocationData = {
+            const seriesLocationId: string = await apiPost<string>('series/location/section/add', {
                 seriesId: bookSeriesId,
                 name: section.name,
-            };
-
-            let seriesLocationId: string;
-            if (isCurrentlyOffline() || book?.localBook) {
-                // Mode offline ou livre local → Tauri
-                seriesLocationId = await tauri.addSeriesLocationSection(seriesLocationData);
-            } else {
-                // Mode online → Serveur
-                seriesLocationId = await System.authPostToServer<string>('series/location/section/add', seriesLocationData, userToken, lang);
-                // Si la série a une copie locale → addToQueue avec l'ID du serveur
-                if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === bookSeriesId)) {
-                    addToQueue('add_series_location_section', {data: {...seriesLocationData, id: seriesLocationId}});
-                }
-            }
-
+            }, userToken, lang);
+            
             if (seriesLocationId) {
-                const updateData = {
+                const updateResponse: boolean = await apiPost<boolean>('location/section/update', {
                     sectionId: section.id,
                     sectionName: section.name,
                     seriesLocationId: seriesLocationId,
-                };
-
-                let updateResponse: boolean;
-                if (isCurrentlyOffline() || book?.localBook) {
-                    // Mode offline ou livre local → Tauri
-                    updateResponse = await tauri.updateLocationSectionWithSeriesLink(updateData.sectionId, updateData.sectionName, updateData.seriesLocationId);
-                } else {
-                    // Mode online → Serveur
-                    updateResponse = await System.authPostToServer<boolean>('location/section/update', updateData, userToken, lang);
-                    // Si le livre a une copie locale → addToQueue
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('update_location_section_with_series_link', {data: updateData});
-                    }
-                }
-
+                }, userToken, lang);
+                
                 if (updateResponse) {
                     setSections(function (prev: LocationProps[]): LocationProps[] {
                         return prev.map(function (s: LocationProps): LocationProps {
@@ -777,32 +617,24 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
                 errorMessage(e.message);
             }
         }
-    }, [bookSeriesId, userToken, lang, successMessage, errorMessage, t, isCurrentlyOffline, book, addToQueue, localSyncedBooks, localSyncedSeries, entityId]);
-
+    }, [bookSeriesId, userToken, lang, successMessage, errorMessage, t]);
+    
     const importFromSeries = useCallback(async function (seriesLocationId: string): Promise<void> {
         const seriesLocation: SeriesLocationItem | undefined = seriesLocations.find(function (location: SeriesLocationItem): boolean {
             return location.id === seriesLocationId;
         });
         if (!seriesLocation) return;
-
+        
         try {
-            const sectionData = {
-                bookId: entityId,
-                locationName: seriesLocation.name,
-                seriesLocationId: seriesLocationId,
-            };
-
             let sectionId: string;
-            if (isCurrentlyOffline() || book?.localBook) {
-                // Mode offline ou livre local → Tauri
-                sectionId = await tauri.addLocationSection(sectionData.locationName, sectionData.bookId, undefined, sectionData.seriesLocationId);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                sectionId = await tauri.addLocationSection(seriesLocation.name, entityId, undefined, seriesLocationId);
             } else {
-                // Mode online → Serveur
-                sectionId = await System.authPostToServer<string>('location/section/add', sectionData, userToken, lang);
-                // Si le livre a une copie locale → addToQueue avec l'ID du serveur
-                if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                    addToQueue('add_location_section', {data: {...sectionData, id: sectionId}});
-                }
+                sectionId = await apiPost<string>('location/section/add', {
+                    bookId: entityId,
+                    locationName: seriesLocation.name,
+                    seriesLocationId: seriesLocationId,
+                }, userToken, lang);
             }
 
             if (!sectionId) {
@@ -813,48 +645,32 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
             const importedElements: Element[] = [];
 
             for (const seriesElement of seriesLocation.elements) {
-                const elementData = {
-                    bookId: entityId,
-                    locationId: sectionId,
-                    elementName: seriesElement.name,
-                };
-
                 let elementId: string;
-                if (isCurrentlyOffline() || book?.localBook) {
-                    // Mode offline ou livre local → Tauri
-                    elementId = await tauri.addLocationElement(elementData.locationId, elementData.elementName, undefined);
+                if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                    elementId = await tauri.addLocationElement(sectionId, seriesElement.name);
                 } else {
-                    // Mode online → Serveur
-                    elementId = await System.authPostToServer<string>('location/element/add', elementData, userToken, lang);
-                    // Si le livre a une copie locale → addToQueue avec l'ID du serveur
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('add_location_element', {data: {...elementData, id: elementId}});
-                    }
+                    elementId = await apiPost<string>('location/element/add', {
+                        bookId: entityId,
+                        locationId: sectionId,
+                        elementName: seriesElement.name,
+                    }, userToken, lang);
                 }
 
                 if (!elementId) continue;
-
+                
                 const importedSubElements: SubElement[] = [];
-
+                
                 for (const seriesSubElement of seriesElement.subElements) {
-                    const subElementData = {
-                        elementId: elementId,
-                        subElementName: seriesSubElement.name,
-                    };
-
                     let subElementId: string;
-                    if (isCurrentlyOffline() || book?.localBook) {
-                        // Mode offline ou livre local → Tauri
-                        subElementId = await tauri.addLocationSubElement(subElementData.elementId, subElementData.subElementName, undefined);
+                    if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                        subElementId = await tauri.addLocationSubElement(elementId, seriesSubElement.name);
                     } else {
-                        // Mode online → Serveur
-                        subElementId = await System.authPostToServer<string>('location/sub-element/add', subElementData, userToken, lang);
-                        // Si le livre a une copie locale → addToQueue avec l'ID du serveur
-                        if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                            addToQueue('add_location_sub_element', {data: {...subElementData, id: subElementId}});
-                        }
+                        subElementId = await apiPost<string>('location/sub-element/add', {
+                            elementId: elementId,
+                            subElementName: seriesSubElement.name,
+                        }, userToken, lang);
                     }
-
+                    
                     if (subElementId) {
                         importedSubElements.push({
                             id: subElementId,
@@ -863,7 +679,7 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
                         });
                     }
                 }
-
+                
                 importedElements.push({
                     id: elementId,
                     name: seriesElement.name,
@@ -871,7 +687,7 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
                     subElements: importedSubElements,
                 });
             }
-
+            
             const newLocation: LocationProps = {
                 id: sectionId,
                 name: seriesLocation.name,
@@ -886,15 +702,15 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
                 errorMessage(e.message);
             }
         }
-    }, [seriesLocations, entityId, userToken, lang, errorMessage, successMessage, t, isCurrentlyOffline, book, addToQueue, localSyncedBooks]);
-
+    }, [seriesLocations, entityId, userToken, lang, errorMessage, successMessage, t]);
+    
     // Navigation functions
     const enterDetailMode = useCallback(function (sectionIndex: number): void {
         setSelectedSectionIndex(sectionIndex);
         setViewMode('detail');
         setSectionsBackup(null);
     }, []);
-
+    
     const enterEditMode = useCallback(function (): void {
         setSectionsBackup(sections.map(function (section: LocationProps): LocationProps {
             return {
@@ -909,14 +725,10 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
         }));
         setViewMode('edit');
     }, [sections]);
-
+    
     const exitEditMode = useCallback(async function (save: boolean): Promise<void> {
         if (save) {
-            const success: boolean = await saveLocations();
-            if (!success) {
-                // Stay in edit mode on error
-                return;
-            }
+            await saveLocations();
             setViewMode('detail');
         } else {
             if (sectionsBackup) {
@@ -928,13 +740,13 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
         }
         setSectionsBackup(null);
     }, [saveLocations, sectionsBackup]);
-
+    
     const backToList = useCallback(function (): void {
         setSelectedSectionIndex(-1);
         setSectionsBackup(null);
         setViewMode('list');
     }, []);
-
+    
     return {
         // State
         sections,
@@ -946,12 +758,12 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
         newSectionName,
         newElementNames,
         newSubElementNames,
-
+        
         // Navigation state
         viewMode,
         selectedSectionIndex,
         sectionsBackup,
-
+        
         // Actions
         addSection,
         addElement,
@@ -970,7 +782,7 @@ export function useLocations(config: UseLocationsConfig): UseLocationsReturn {
         setNewSectionName,
         setNewElementNames,
         setNewSubElementNames,
-
+        
         // Navigation actions
         enterDetailMode,
         enterEditMode,
diff --git a/hooks/settings/useSpells.ts b/hooks/settings/useSpells.ts
index aadc4aa..4b7dcf0 100644
--- a/hooks/settings/useSpells.ts
+++ b/hooks/settings/useSpells.ts
@@ -1,29 +1,18 @@
 'use client'
 import {useCallback, useContext, useEffect, useState} from 'react';
-import {
-    initialSpellState,
-    SpellEditState,
-    SpellListItem,
-    SpellListResponse,
-    SpellProps,
-    SpellTagProps
-} from '@/lib/models/Spell';
-import {SeriesSpellDetailResponse, SeriesSpellListItem, SeriesSpellListResponse} from '@/lib/models/Series';
-import {SessionContext} from '@/context/SessionContext';
-import {BookContext} from '@/context/BookContext';
-import {AlertContext} from '@/context/AlertContext';
+import {SpellEditState, SpellListItem, SpellListResponse, SpellProps, SpellTagProps} from '@/lib/types/spell';
+import {initialSpellState} from '@/lib/constants/spell';
+import {SeriesSpellDetailResponse, SeriesSpellListItem, SeriesSpellListResponse} from '@/lib/types/series';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
 import {LangContext, LangContextProps} from '@/context/LangContext';
-import System from '@/lib/models/System';
-import {useTranslations} from 'next-intl';
-import {ViewMode} from '@/shared/interface';
-import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from '@/context/SyncQueueContext';
-import {BooksSyncContext, BooksSyncContextProps} from '@/context/BooksSyncContext';
-import {SyncedBook} from '@/lib/models/SyncedBook';
-import {SeriesContext, SeriesContextProps} from '@/context/SeriesContext';
-import {SeriesSyncContext, SeriesSyncContextProps} from '@/context/SeriesSyncContext';
-import {SyncedSeries} from '@/lib/models/SyncedSeries';
+import {apiDelete, apiGet, apiPatch, apiPost, apiPut} from '@/lib/api/client';
+import {useTranslations} from '@/lib/i18n';
+import {ViewMode} from '@/lib/types/settings';
+import {isDesktop} from '@/lib/configs';
 import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
 
 export interface UseSpellsConfig {
     entityType: 'book' | 'series';
@@ -70,15 +59,11 @@ export interface UseSpellsReturn {
 export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
     const {entityType, entityId} = config;
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {session} = useContext(SessionContext);
-    const {book, setBook} = useContext(BookContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {localSeries} = useContext<SeriesContextProps>(SeriesContext);
-    const {localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {book, setBook}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
 
     const [spells, setSpells] = useState<SpellListItem[]>([]);
     const [seriesSpells, setSeriesSpells] = useState<SeriesSpellListItem[]>([]);
@@ -91,7 +76,7 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
     
     const [viewMode, setViewMode] = useState<ViewMode>('list');
     const [spellBackup, setSpellBackup] = useState<SpellEditState | null>(null);
-
+    
     const isSeriesMode: boolean = entityType === 'series';
     const bookSeriesId: string | null = book?.seriesId || null;
     const userToken: string = session?.accessToken || '';
@@ -107,48 +92,36 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
             refreshSeriesSpells().then();
         }
     }, [bookSeriesId, isSeriesMode]);
-
+    
     const refreshSeriesSpells = useCallback(async function (): Promise<void> {
         if (!bookSeriesId) return;
         try {
-            let response: SeriesSpellListResponse;
-            // Dual logic: offline ou livre local → IPC, sinon serveur
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getSeriesSpellList(bookSeriesId) as SeriesSpellListResponse;
-            } else {
-                response = await System.authGetQueryToServer<SeriesSpellListResponse>(
-                    'series/spell/list',
-                    userToken,
-                    lang,
-                    {seriesid: bookSeriesId}
-                );
-            }
+            const response: SeriesSpellListResponse = await apiGet<SeriesSpellListResponse>(
+                'series/spell/list',
+                userToken,
+                lang,
+                {seriesid: bookSeriesId}
+            );
             if (response) {
                 setSeriesSpells(response.spells);
             }
         } catch (e: unknown) {
             if (e instanceof Error) {
-                console.error('Error loading series spells:', e.message);
+                errorMessage(e.message);
             }
         }
-    }, [bookSeriesId, userToken, lang, isCurrentlyOffline, book?.localBook]);
-
+    }, [bookSeriesId, userToken, lang]);
+    
     const refreshSpells = useCallback(async function (): Promise<void> {
         setIsLoading(true);
         try {
             if (isSeriesMode) {
-                // Series mode - dual logic
-                let response: SeriesSpellListResponse;
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.getSeriesSpellList(entityId) as SeriesSpellListResponse;
-                } else {
-                    response = await System.authGetQueryToServer<SeriesSpellListResponse>(
-                        'series/spell/list',
-                        userToken,
-                        lang,
-                        {seriesid: entityId}
-                    );
-                }
+                const response: SeriesSpellListResponse = await apiGet<SeriesSpellListResponse>(
+                    'series/spell/list',
+                    userToken,
+                    lang,
+                    {seriesid: entityId}
+                );
                 if (response) {
                     const mappedSpells: SpellListItem[] = response.spells.map(function (spell: SeriesSpellListItem): SpellListItem {
                         return {
@@ -168,17 +141,12 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
                 }
             } else {
                 let response: SpellListResponse;
-                if (isCurrentlyOffline()) {
-                    response = await tauri.getSpellList(entityId, true) as SpellListResponse;
-                } else if (book?.localBook) {
-                    response = await tauri.getSpellList(entityId, true) as SpellListResponse;
+                if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                    response = await tauri.getSpellList(entityId, book?.tools?.spells ?? false) as SpellListResponse;
                 } else {
-                    response = await System.authGetQueryToServer<SpellListResponse>(
-                        'spell/list',
-                        userToken,
-                        lang,
-                        {bookid: entityId}
-                    );
+                    response = await apiGet<SpellListResponse>('spell/list', userToken, lang, {
+                        bookid: entityId
+                    });
                 }
                 if (response) {
                     setSpells(response.spells.map(function (spell: SpellListItem): SpellListItem {
@@ -211,13 +179,13 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
         } finally {
             setIsLoading(false);
         }
-    }, [entityId, isSeriesMode, userToken, lang, book, setBook, errorMessage, t, isCurrentlyOffline]);
-
+    }, [entityId, isSeriesMode, userToken, lang, book, setBook, errorMessage, t]);
+    
     const selectSpell = useCallback(async function (spell: SpellListItem): Promise<void> {
         const tagIds: string[] = spell.tags ? spell.tags.map(function (tag: SpellTagProps): string {
             return tag.id;
         }) : [];
-
+        
         setSelectedSpell({
             id: spell.id,
             name: spell.name,
@@ -231,21 +199,15 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
             seriesSpellId: spell.seriesSpellId || null,
         });
         setSelectedSeriesSpell(null);
-
+        
         try {
             if (isSeriesMode) {
-                // Series mode - dual logic
-                let response: SeriesSpellDetailResponse;
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.getSeriesSpellDetail(spell.id) as SeriesSpellDetailResponse;
-                } else {
-                    response = await System.authGetQueryToServer<SeriesSpellDetailResponse>(
-                        'series/spell/detail',
-                        userToken,
-                        lang,
-                        {spellid: spell.id}
-                    );
-                }
+                const response: SeriesSpellDetailResponse = await apiGet<SeriesSpellDetailResponse>(
+                    'series/spell/detail',
+                    userToken,
+                    lang,
+                    {spellid: spell.id}
+                );
                 if (response) {
                     setSelectedSpell(function (prev: SpellEditState | null): SpellEditState | null {
                         if (!prev) return null;
@@ -261,17 +223,12 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
                 }
             } else {
                 let response: SpellProps;
-                if (isCurrentlyOffline()) {
-                    response = await tauri.getSpellDetail(spell.id) as SpellProps;
-                } else if (book?.localBook) {
+                if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
                     response = await tauri.getSpellDetail(spell.id) as SpellProps;
                 } else {
-                    response = await System.authGetQueryToServer<SpellProps>(
-                        'spell/detail',
-                        userToken,
-                        lang,
-                        {spellid: spell.id}
-                    );
+                    response = await apiGet<SpellProps>('spell/detail', userToken, lang, {
+                        spellid: spell.id
+                    });
                 }
                 if (response) {
                     setSelectedSpell(function (prev: SpellEditState | null): SpellEditState | null {
@@ -286,19 +243,14 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
                             seriesSpellId: response.seriesSpellId || null,
                         };
                     });
-
+                    
                     if (response.seriesSpellId) {
-                        let seriesSpellResponse: SeriesSpellDetailResponse;
-                        if (isCurrentlyOffline() || book?.localBook) {
-                            seriesSpellResponse = await tauri.getSeriesSpellDetail(response.seriesSpellId) as SeriesSpellDetailResponse;
-                        } else {
-                            seriesSpellResponse = await System.authGetQueryToServer<SeriesSpellDetailResponse>(
-                                'series/spell/detail',
-                                userToken,
-                                lang,
-                                {spellid: response.seriesSpellId}
-                            );
-                        }
+                        const seriesSpellResponse: SeriesSpellDetailResponse = await apiGet<SeriesSpellDetailResponse>(
+                            'series/spell/detail',
+                            userToken,
+                            lang,
+                            {spellid: response.seriesSpellId}
+                        );
                         if (seriesSpellResponse) {
                             setSelectedSeriesSpell(seriesSpellResponse);
                         }
@@ -310,44 +262,40 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
                 errorMessage(e.message);
             }
         }
-    }, [isSeriesMode, userToken, lang, errorMessage, isCurrentlyOffline, book?.localBook]);
-
+    }, [isSeriesMode, userToken, lang, errorMessage]);
+    
     const addNewSpell = useCallback(function (): void {
         setSelectedSpell({...initialSpellState});
         setSelectedSeriesSpell(null);
         setViewMode('edit');
         setSpellBackup(null);
     }, []);
-
+    
     const clearSelection = useCallback(function (): void {
         setSelectedSpell(null);
         setSelectedSeriesSpell(null);
         setViewMode('list');
         setSpellBackup(null);
     }, []);
-
+    
     const updateSpellField = useCallback(function (key: keyof SpellEditState, value: string | string[] | null): void {
         if (selectedSpell) {
             setSelectedSpell({...selectedSpell, [key]: value});
         }
     }, [selectedSpell]);
-
+    
     const toggleTool = useCallback(async function (enabled: boolean): Promise<void> {
         if (isSeriesMode) return;
         try {
-            const requestData = {
-                bookId: book?.bookId,
-                toolName: 'spells',
-                enabled: enabled
-            };
             let response: boolean;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.updateBookToolSetting(requestData.bookId, requestData.toolName, requestData.enabled);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.updateBookToolSetting(book?.bookId ?? '', 'spells', enabled);
             } else {
-                response = await System.authPatchToServer<boolean>('book/tool-setting', requestData, userToken, lang);
-                if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === book?.bookId)) {
-                    addToQueue('update_book_tool_setting', {data: requestData});
-                }
+                response = await apiPatch<boolean>('book/tool-setting', {
+                    bookId: book?.bookId,
+                    toolName: 'spells',
+                    enabled: enabled
+                }, userToken, lang);
             }
             if (response && setBook && book) {
                 setToolEnabled(enabled);
@@ -366,18 +314,18 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
                 errorMessage(e.message);
             }
         }
-    }, [isSeriesMode, book, setBook, userToken, lang, errorMessage, isCurrentlyOffline, localSyncedBooks, addToQueue]);
-
+    }, [isSeriesMode, book, setBook, userToken, lang, errorMessage]);
+    
     const saveSpell = useCallback(async function (): Promise<boolean> {
         if (!selectedSpell) return false;
-
+        
         if (selectedSpell.id === null) {
             return await addSpellInternal(selectedSpell);
         } else {
             return await updateSpellInternal(selectedSpell);
         }
     }, [selectedSpell]);
-
+    
     async function addSpellInternal(spell: SpellEditState): Promise<boolean> {
         if (!spell.name) {
             errorMessage(t("spellComponent.errorNameRequired"));
@@ -385,49 +333,23 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
         }
         try {
             let newSpellId: string;
+            const spellData: Record<string, string | string[] | null> = {
+                ...(isSeriesMode ? {seriesId: entityId} : {bookId: entityId}),
+                name: spell.name,
+                description: spell.description,
+                appearance: spell.appearance,
+                tags: spell.tags,
+                powerLevel: spell.powerLevel,
+                components: spell.components,
+                limitations: spell.limitations,
+                notes: spell.notes,
+            };
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const data = {
-                    seriesId: entityId,
-                    name: spell.name,
-                    description: spell.description,
-                    appearance: spell.appearance,
-                    tags: spell.tags,
-                    powerLevel: spell.powerLevel,
-                    components: spell.components,
-                    limitations: spell.limitations,
-                    notes: spell.notes,
-                };
-                if (isCurrentlyOffline() || localSeries) {
-                    newSpellId = await tauri.addSeriesSpell(data);
-                } else {
-                    newSpellId = await System.authPostToServer<string>('series/spell/add', data, userToken, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('add_series_spell', {data: {...data, id: newSpellId}});
-                    }
-                }
+                newSpellId = await apiPost<string>('series/spell/add', spellData, userToken, lang);
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                newSpellId = await tauri.createSpell(entityId, spellData) as string;
             } else {
-                const data = {
-                    bookId: entityId,
-                    spell: {
-                        name: spell.name,
-                        description: spell.description,
-                        appearance: spell.appearance,
-                        tags: spell.tags,
-                        powerLevel: spell.powerLevel,
-                        components: spell.components,
-                        limitations: spell.limitations,
-                        notes: spell.notes,
-                    }
-                };
-                if (isCurrentlyOffline() || book?.localBook) {
-                    newSpellId = await tauri.createSpell(data.bookId, data.spell);
-                } else {
-                    newSpellId = await System.authPostToServer<string>('spell/add', data, userToken, lang);
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('create_spell', {data: {...data, id: newSpellId}});
-                    }
-                }
+                newSpellId = await apiPost<string>('spell/add', spellData, userToken, lang);
             }
             if (!newSpellId) {
                 errorMessage(t("spellComponent.errorAddSpell"));
@@ -458,7 +380,7 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
             return false;
         }
     }
-
+    
     async function updateSpellInternal(spellToUpdate: SpellEditState): Promise<boolean> {
         if (!spellToUpdate.id) return false;
         if (!spellToUpdate.name) {
@@ -466,8 +388,7 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
             return false;
         }
         try {
-            let success: boolean;
-            const data = {
+            const spellData: Record<string, string | string[] | null> = {
                 id: spellToUpdate.id,
                 name: spellToUpdate.name,
                 description: spellToUpdate.description,
@@ -478,25 +399,13 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
                 limitations: spellToUpdate.limitations,
                 notes: spellToUpdate.notes,
             };
+            let success: boolean;
             if (isSeriesMode) {
-                // Series mode - dual logic
-                if (isCurrentlyOffline() || localSeries) {
-                    success = await tauri.updateSeriesSpell(data);
-                } else {
-                    success = await System.authPutToServer<boolean>('series/spell/update', data, userToken, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('update_series_spell', {data});
-                    }
-                }
+                success = await apiPut<boolean>('series/spell/update', spellData, userToken, lang);
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                success = await tauri.updateSpell(spellToUpdate.id!, spellData);
             } else {
-                if (isCurrentlyOffline() || book?.localBook) {
-                    success = await tauri.updateSpell(data.id, data);
-                } else {
-                    success = await System.authPutToServer<boolean>('spell/update', data, userToken, lang);
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('update_spell', {data});
-                    }
-                }
+                success = await apiPut<boolean>('spell/update', spellData, userToken, lang);
             }
             if (!success) {
                 errorMessage(t("spellComponent.errorUpdateSpell"));
@@ -529,32 +438,16 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
             return false;
         }
     }
-
+    
     const deleteSpell = useCallback(async function (spellId: string): Promise<void> {
         try {
             let success: boolean;
-            const deletedAt: number = System.timeStampInSeconds();
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const requestData = {spellId, deletedAt};
-                if (isCurrentlyOffline() || localSeries) {
-                    success = await tauri.deleteSeriesSpell(requestData.spellId, requestData.deletedAt);
-                } else {
-                    success = await System.authDeleteToServer<boolean>('series/spell/delete', requestData, userToken, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('delete_series_spell', {data: requestData});
-                    }
-                }
+                success = await apiDelete<boolean>('series/spell/delete', {spellId}, userToken, lang);
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                success = await tauri.deleteSpell(spellId, book?.bookId ?? '', Date.now());
             } else {
-                const requestData = {spellId, bookId: entityId, deletedAt};
-                if (isCurrentlyOffline() || book?.localBook) {
-                    success = await tauri.deleteSpell(requestData.spellId, requestData.bookId, requestData.deletedAt);
-                } else {
-                    success = await System.authDeleteToServer<boolean>('spell/delete', requestData, userToken, lang);
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('delete_spell', {data: requestData});
-                    }
-                }
+                success = await apiDelete<boolean>('spell/delete', {spellId}, userToken, lang);
             }
             if (!success) {
                 errorMessage(t("spellComponent.errorDeleteSpell"));
@@ -573,44 +466,31 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
                 errorMessage(t("common.unknownError"));
             }
         }
-    }, [isSeriesMode, userToken, lang, errorMessage, t, isCurrentlyOffline, book?.localBook, entityId, localSyncedBooks, addToQueue]);
-
+    }, [isSeriesMode, userToken, lang, errorMessage, t]);
+    
     const exportToSeries = useCallback(async function (): Promise<void> {
         if (!selectedSpell || !selectedSpell.id || !bookSeriesId) return;
-
+        
         try {
-            const seriesSpellData = {
-                seriesId: bookSeriesId,
-                name: selectedSpell.name,
-                description: selectedSpell.description,
-                appearance: selectedSpell.appearance || '',
-                tags: [],
-                powerLevel: selectedSpell.powerLevel || null,
-                components: selectedSpell.components || null,
-                limitations: selectedSpell.limitations || null,
-                notes: selectedSpell.notes || null,
-            };
-
-            let seriesSpellId: string;
-            if (isCurrentlyOffline() || book?.localBook) {
-                // Mode offline ou livre local → IPC
-                seriesSpellId = await tauri.addSeriesSpell(seriesSpellData);
-            } else {
-                // Mode online → Serveur
-                seriesSpellId = await System.authPostToServer<string>(
-                    'series/spell/add',
-                    seriesSpellData,
-                    userToken,
-                    lang
-                );
-                // Si la série a une copie locale → addToQueue
-                if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === bookSeriesId)) {
-                    addToQueue('add_series_spell', {data: {...seriesSpellData, id: seriesSpellId}});
-                }
-            }
-
+            const seriesSpellId: string = await apiPost<string>(
+                'series/spell/add',
+                {
+                    seriesId: bookSeriesId,
+                    name: selectedSpell.name,
+                    description: selectedSpell.description,
+                    appearance: selectedSpell.appearance || '',
+                    tags: [],
+                    powerLevel: selectedSpell.powerLevel || null,
+                    components: selectedSpell.components || null,
+                    limitations: selectedSpell.limitations || null,
+                    notes: selectedSpell.notes || null,
+                },
+                userToken,
+                lang
+            );
+            
             if (seriesSpellId) {
-                const updateData = {
+                const updateSuccess: boolean = await apiPut<boolean>('spell/update', {
                     id: selectedSpell.id,
                     name: selectedSpell.name,
                     description: selectedSpell.description,
@@ -621,21 +501,8 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
                     limitations: selectedSpell.limitations,
                     notes: selectedSpell.notes,
                     seriesSpellId: seriesSpellId
-                };
-
-                let updateSuccess: boolean;
-                if (isCurrentlyOffline() || book?.localBook) {
-                    // Mode offline ou livre local → Tauri
-                    updateSuccess = await tauri.updateSpell(updateData.id, updateData);
-                } else {
-                    // Mode online → Serveur
-                    updateSuccess = await System.authPutToServer<boolean>('spell/update', updateData, userToken, lang);
-                    // Si le livre a une copie locale → addToQueue
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('update_spell', {data: updateData});
-                    }
-                }
-
+                }, userToken, lang);
+                
                 if (updateSuccess) {
                     setSelectedSpell({...selectedSpell, seriesSpellId: seriesSpellId});
                     setSpells(function (prev: SpellListItem[]): SpellListItem[] {
@@ -662,56 +529,38 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
                 errorMessage(e.message);
             }
         }
-    }, [selectedSpell, bookSeriesId, userToken, lang, successMessage, errorMessage, t, isCurrentlyOffline, book, addToQueue, localSyncedBooks, localSyncedSeries, entityId]);
-
+    }, [selectedSpell, bookSeriesId, userToken, lang, successMessage, errorMessage, t]);
+    
     const importFromSeries = useCallback(async function (seriesSpellId: string): Promise<void> {
         try {
-            // 1. Récupérer les détails du sort de la série
-            let seriesSpellDetail: SeriesSpellDetailResponse;
-            if (isCurrentlyOffline() || book?.localBook) {
-                // Mode offline → Tauri pour récupérer les détails du sort de la série locale
-                seriesSpellDetail = await tauri.getSeriesSpellDetail(seriesSpellId) as SeriesSpellDetailResponse;
-            } else {
-                // Mode online → Serveur
-                seriesSpellDetail = await System.authGetQueryToServer<SeriesSpellDetailResponse>(
-                    'series/spell/detail',
-                    userToken,
-                    lang,
-                    {spellid: seriesSpellId}
-                );
-            }
-
+            const seriesSpellDetail: SeriesSpellDetailResponse = await apiGet<SeriesSpellDetailResponse>(
+                'series/spell/detail',
+                userToken,
+                lang,
+                {spellid: seriesSpellId}
+            );
+            
             if (!seriesSpellDetail) return;
-
-            // 2. Créer le sort dans le livre
-            const spellData = {
-                bookId: entityId,
-                spell: {
-                    name: seriesSpellDetail.name,
-                    description: seriesSpellDetail.description,
-                    appearance: seriesSpellDetail.appearance || '',
-                    tags: [],
-                    powerLevel: seriesSpellDetail.powerLevel,
-                    components: seriesSpellDetail.components,
-                    limitations: seriesSpellDetail.limitations,
-                    notes: seriesSpellDetail.notes,
-                    seriesSpellId: seriesSpellId
-                }
-            };
-
+            
             let createdSpellId: string;
-            if (isCurrentlyOffline() || book?.localBook) {
-                // Mode offline ou livre local → Tauri
-                createdSpellId = await tauri.createSpell(spellData.bookId, spellData.spell);
+            const spellImportData: Record<string, unknown> = {
+                bookId: entityId,
+                name: seriesSpellDetail.name,
+                description: seriesSpellDetail.description,
+                appearance: seriesSpellDetail.appearance || '',
+                tags: [],
+                powerLevel: seriesSpellDetail.powerLevel,
+                components: seriesSpellDetail.components,
+                limitations: seriesSpellDetail.limitations,
+                notes: seriesSpellDetail.notes,
+                seriesSpellId: seriesSpellId
+            };
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                createdSpellId = await tauri.createSpell(entityId, spellImportData) as string;
             } else {
-                // Mode online → Serveur
-                createdSpellId = await System.authPostToServer<string>('spell/add', spellData, userToken, lang);
-                // Si le livre a une copie locale → addToQueue
-                if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                    addToQueue('create_spell', {data: {...spellData, id: createdSpellId}});
-                }
+                createdSpellId = await apiPost<string>('spell/add', spellImportData, userToken, lang);
             }
-
+            
             if (createdSpellId) {
                 const newSpellListItem: SpellListItem = {
                     id: createdSpellId,
@@ -731,31 +580,21 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
                 errorMessage(e.message);
             }
         }
-    }, [entityId, userToken, lang, errorMessage, successMessage, t, isCurrentlyOffline, book, addToQueue, localSyncedBooks]);
-
+    }, [entityId, userToken, lang, errorMessage, successMessage, t]);
+    
     const createTag = useCallback(async function (name: string, color: string): Promise<SpellTagProps | null> {
         try {
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const addData = {
-                    seriesId: entityId,
-                    name: name,
-                    color: color,
-                };
-                let tagId: string;
-                if (isCurrentlyOffline() || localSeries) {
-                    tagId = await tauri.addSeriesSpellTag(addData);
-                } else {
-                    tagId = await System.authPostToServer<string>(
-                        'series/spell/tag/add',
-                        addData,
-                        userToken,
-                        lang
-                    );
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('add_series_spell_tag', {data: {...addData, id: tagId}});
-                    }
-                }
+                const tagId: string = await apiPost<string>(
+                    'series/spell/tag/add',
+                    {
+                        seriesId: entityId,
+                        name: name,
+                        color: color,
+                    },
+                    userToken,
+                    lang
+                );
                 if (tagId) {
                     const newTag: SpellTagProps = {id: tagId, name: name, color: color};
                     setTags(function (prev: SpellTagProps[]): SpellTagProps[] {
@@ -764,21 +603,22 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
                     return newTag;
                 }
                 return null;
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                const result = await tauri.createSpellTag(entityId, name, color);
+                const newTag: SpellTagProps = result as SpellTagProps;
+                if (newTag && newTag.id) {
+                    setTags(function (prev: SpellTagProps[]): SpellTagProps[] {
+                        return [...prev, newTag];
+                    });
+                    return newTag;
+                }
+                return null;
             } else {
-                const requestData = {
+                const newTag: SpellTagProps = await apiPost<SpellTagProps>('spell/tag/add', {
                     bookId: entityId,
                     name: name,
                     color: color,
-                };
-                let newTag: SpellTagProps;
-                if (isCurrentlyOffline() || book?.localBook) {
-                    newTag = await tauri.createSpellTag(requestData.bookId, requestData.name, requestData.color) as SpellTagProps;
-                } else {
-                    newTag = await System.authPostToServer<SpellTagProps>('spell/tag/add', requestData, userToken, lang);
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('create_spell_tag', {data: {...requestData, id: newTag?.id}});
-                    }
-                }
+                }, userToken, lang);
                 if (newTag && newTag.id) {
                     setTags(function (prev: SpellTagProps[]): SpellTagProps[] {
                         return [...prev, newTag];
@@ -793,31 +633,21 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
             }
             return null;
         }
-    }, [isSeriesMode, entityId, userToken, lang, errorMessage, isCurrentlyOffline, book?.localBook, localSyncedBooks, addToQueue]);
-
+    }, [isSeriesMode, entityId, userToken, lang, errorMessage]);
+    
     const updateTag = useCallback(async function (tagId: string, name: string, color: string): Promise<boolean> {
         try {
             let success: boolean;
-            const requestData = {tagId, name, color};
             if (isSeriesMode) {
-                // Series mode - dual logic
-                if (isCurrentlyOffline() || localSeries) {
-                    success = await tauri.updateSeriesSpellTag(requestData);
-                } else {
-                    success = await System.authPutToServer<boolean>('series/spell/tag/update', requestData, userToken, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('update_series_spell_tag', {data: requestData});
-                    }
-                }
+                success = await apiPut<boolean>('series/spell/tag/update', {
+                    tagId, name, color
+                }, userToken, lang);
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                success = await tauri.updateSpellTag(tagId, name, color);
             } else {
-                if (isCurrentlyOffline() || book?.localBook) {
-                    success = await tauri.updateSpellTag(requestData.tagId, requestData.name, requestData.color);
-                } else {
-                    success = await System.authPutToServer<boolean>('spell/tag/update', requestData, userToken, lang);
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('update_spell_tag', {data: requestData});
-                    }
-                }
+                success = await apiPut<boolean>('spell/tag/update', {
+                    tagId, name, color
+                }, userToken, lang);
             }
             if (!success) {
                 errorMessage(t("spellComponent.updateSuccess"));
@@ -835,33 +665,19 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
             }
             return false;
         }
-    }, [isSeriesMode, userToken, lang, errorMessage, t, isCurrentlyOffline, book?.localBook, entityId, localSyncedBooks, addToQueue]);
-
+    }, [isSeriesMode, userToken, lang, errorMessage, t]);
+    
     const deleteTag = useCallback(async function (tagId: string): Promise<boolean> {
         try {
             let success: boolean;
-            const deletedAt: number = System.timeStampInSeconds();
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const deleteData = {tagId, deletedAt};
-                if (isCurrentlyOffline() || localSeries) {
-                    success = await tauri.deleteSeriesSpellTag(deleteData.tagId, deleteData.deletedAt);
-                } else {
-                    success = await System.authDeleteToServer<boolean>('series/spell/tag/delete', deleteData, userToken, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('delete_series_spell_tag', {data: deleteData});
-                    }
-                }
+                success = await apiDelete<boolean>('series/spell/tag/delete', {tagId}, userToken, lang);
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                success = await tauri.deleteSpellTag(tagId, book?.bookId ?? '', Date.now());
             } else {
-                const requestData = {tagId, bookId: entityId, deletedAt};
-                if (isCurrentlyOffline() || book?.localBook) {
-                    success = await tauri.deleteSpellTag(requestData.tagId, requestData.bookId, requestData.deletedAt);
-                } else {
-                    success = await System.authDeleteToServer<boolean>('spell/tag/delete', requestData, userToken, lang);
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('delete_spell_tag', {data: requestData});
-                    }
-                }
+                success = await apiDelete<boolean>('spell/tag/delete', {
+                    tagId, bookId: entityId
+                }, userToken, lang);
             }
             if (success) {
                 setTags(function (prev: SpellTagProps[]): SpellTagProps[] {
@@ -878,40 +694,35 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
             }
             return false;
         }
-    }, [isSeriesMode, entityId, userToken, lang, errorMessage, isCurrentlyOffline, book?.localBook, localSyncedBooks, addToQueue]);
-
+    }, [isSeriesMode, entityId, userToken, lang, errorMessage]);
+    
     const handleSyncComplete = useCallback(async function (): Promise<void> {
         if (selectedSpell?.seriesSpellId) {
-            let seriesSpellResponse: SeriesSpellDetailResponse;
-            if (isCurrentlyOffline() || (isSeriesMode ? localSeries : book?.localBook)) {
-                seriesSpellResponse = await tauri.getSeriesSpellDetail(selectedSpell.seriesSpellId) as SeriesSpellDetailResponse;
-            } else {
-                seriesSpellResponse = await System.authGetQueryToServer<SeriesSpellDetailResponse>(
-                    'series/spell/detail',
-                    userToken,
-                    lang,
-                    {spellid: selectedSpell.seriesSpellId}
-                );
-            }
+            const seriesSpellResponse: SeriesSpellDetailResponse = await apiGet<SeriesSpellDetailResponse>(
+                'series/spell/detail',
+                userToken,
+                lang,
+                {spellid: selectedSpell.seriesSpellId}
+            );
             if (seriesSpellResponse) {
                 setSelectedSeriesSpell(seriesSpellResponse);
             }
         }
-    }, [selectedSpell?.seriesSpellId, userToken, lang, isCurrentlyOffline, isSeriesMode, localSeries, book?.localBook]);
+    }, [selectedSpell?.seriesSpellId, userToken, lang]);
     
     const enterDetailMode = useCallback(async function (spell: SpellListItem): Promise<void> {
         await selectSpell(spell);
         setViewMode('detail');
         setSpellBackup(null);
     }, [selectSpell]);
-
+    
     const enterEditMode = useCallback(function (): void {
         if (selectedSpell) {
             setSpellBackup({...selectedSpell});
         }
         setViewMode('edit');
     }, [selectedSpell]);
-
+    
     const exitEditMode = useCallback(async function (save: boolean): Promise<void> {
         if (save) {
             const success: boolean = await saveSpell();
@@ -932,14 +743,14 @@ export function useSpells(config: UseSpellsConfig): UseSpellsReturn {
         }
         setSpellBackup(null);
     }, [saveSpell, spellBackup]);
-
+    
     const backToList = useCallback(function (): void {
         setSelectedSpell(null);
         setSelectedSeriesSpell(null);
         setSpellBackup(null);
         setViewMode('list');
     }, []);
-
+    
     return {
         spells,
         seriesSpells,
diff --git a/hooks/settings/useWorlds.ts b/hooks/settings/useWorlds.ts
index 3ed5eef..03b30e0 100644
--- a/hooks/settings/useWorlds.ts
+++ b/hooks/settings/useWorlds.ts
@@ -1,23 +1,18 @@
 'use client'
 import {useCallback, useContext, useEffect, useState} from 'react';
-import {WorldListResponse, WorldProps} from '@/lib/models/World';
-import {SeriesWorldProps} from '@/lib/models/Series';
-import {SessionContext} from '@/context/SessionContext';
-import {BookContext} from '@/context/BookContext';
-import {AlertContext} from '@/context/AlertContext';
+import {WorldElement, WorldElementSection, WorldListResponse, WorldProps, WorldTextField} from '@/lib/types/world';
+import {SeriesWorldProps} from '@/lib/types/series';
+import {SessionContext, SessionContextProps} from '@/context/SessionContext';
+import {BookContext, BookContextProps} from '@/context/BookContext';
+import {AlertContext, AlertContextProps} from '@/context/AlertContext';
 import {LangContext, LangContextProps} from '@/context/LangContext';
-import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
-import {LocalSyncQueueContext, LocalSyncQueueContextProps} from '@/context/SyncQueueContext';
-import {BooksSyncContext, BooksSyncContextProps} from '@/context/BooksSyncContext';
-import {SyncedBook} from '@/lib/models/SyncedBook';
-import {SeriesContext, SeriesContextProps} from '@/context/SeriesContext';
-import {SeriesSyncContext, SeriesSyncContextProps} from '@/context/SeriesSyncContext';
-import {SyncedSeries} from '@/lib/models/SyncedSeries';
-import System from '@/lib/models/System';
-import {useTranslations} from 'next-intl';
-import {SelectBoxProps} from '@/shared/interface';
-import {ViewMode} from '@/shared/interface';
+import {apiGet, apiPatch, apiPost} from '@/lib/api/client';
+import {useTranslations} from '@/lib/i18n';
+import {SelectBoxProps} from '@/components/form/SelectBox';
+import {ViewMode} from '@/lib/types/settings';
+import {isDesktop} from '@/lib/configs';
 import * as tauri from '@/lib/tauri';
+import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
 
 const initialWorldState: WorldProps = {
     id: '',
@@ -58,17 +53,17 @@ export interface UseWorldsReturn {
     bookSeriesId: string | null;
     showAddNewWorld: boolean;
     newWorldName: string;
-
+    
     // Navigation state
     viewMode: ViewMode;
     worldBackup: WorldProps | null;
-
+    
     // Actions
     selectWorld: (worldId: string) => void;
     addNewWorld: () => Promise<void>;
-    saveWorld: () => Promise<boolean>;
-    updateWorldField: (field: keyof WorldProps, value: string) => void;
-    updateWorldArrayField: (field: keyof WorldProps, value: unknown) => void;
+    saveWorld: () => Promise<void>;
+    updateWorldField: (field: WorldTextField, value: string) => void;
+    updateWorldArrayField: (field: WorldElementSection, value: WorldElement[]) => void;
     toggleTool: (enabled: boolean) => Promise<void>;
     importFromSeries: (seriesWorldId: string) => Promise<void>;
     exportToSeries: () => Promise<void>;
@@ -78,7 +73,7 @@ export interface UseWorldsReturn {
     setNewWorldName: (name: string) => void;
     setWorlds: React.Dispatch<React.SetStateAction<WorldProps[]>>;
     getSeriesWorldForCurrentWorld: () => SeriesWorldProps | null;
-
+    
     // Navigation actions
     enterDetailMode: (worldId: string) => void;
     enterEditMode: () => void;
@@ -89,15 +84,11 @@ export interface UseWorldsReturn {
 export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
     const {entityType, entityId} = config;
     const t = useTranslations();
-    const {lang} = useContext<LangContextProps>(LangContext);
-    const {session} = useContext(SessionContext);
-    const {book, setBook} = useContext(BookContext);
-    const {errorMessage, successMessage} = useContext(AlertContext);
-    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
-    const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
-    const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
-    const {localSeries} = useContext<SeriesContextProps>(SeriesContext);
-    const {localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
+    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+    const {book, setBook}: BookContextProps = useContext<BookContextProps>(BookContext);
+    const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
+    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
 
     const [worlds, setWorlds] = useState<WorldProps[]>([]);
     const [seriesWorlds, setSeriesWorlds] = useState<SeriesWorldProps[]>([]);
@@ -107,70 +98,58 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [showAddNewWorld, setShowAddNewWorld] = useState<boolean>(false);
     const [newWorldName, setNewWorldName] = useState<string>('');
-
+    
     // Navigation state
     const [viewMode, setViewMode] = useState<ViewMode>('list');
     const [worldBackup, setWorldBackup] = useState<WorldProps | null>(null);
-
+    
     const isSeriesMode: boolean = entityType === 'series';
     const bookSeriesId: string | null = book?.seriesId || null;
     const userToken: string = session?.accessToken || '';
-
+    
     // Load worlds on mount
     useEffect(function (): void {
         if (entityId) {
             refreshWorlds();
         }
     }, [entityId]);
-
+    
     // Load series worlds for book mode
     useEffect(function (): void {
         if (bookSeriesId && !isSeriesMode) {
             refreshSeriesWorlds();
         }
     }, [bookSeriesId, isSeriesMode]);
-
+    
     const refreshSeriesWorlds = useCallback(async function (): Promise<void> {
         if (!bookSeriesId) return;
         try {
-            let response: SeriesWorldProps[];
-            // Dual logic: offline ou livre local → IPC, sinon serveur
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.getSeriesWorldList(bookSeriesId);
-            } else {
-                response = await System.authGetQueryToServer<SeriesWorldProps[]>(
-                    'series/world/list',
-                    userToken,
-                    lang,
-                    {seriesid: bookSeriesId}
-                );
-            }
+            const response: SeriesWorldProps[] = await apiGet<SeriesWorldProps[]>(
+                'series/world/list',
+                userToken,
+                lang,
+                {seriesid: bookSeriesId}
+            );
             if (response) {
                 setSeriesWorlds(response);
             }
         } catch (e: unknown) {
             if (e instanceof Error) {
-                console.error('Error loading series worlds:', e.message);
+                errorMessage(e.message);
             }
         }
-    }, [bookSeriesId, userToken, lang, isCurrentlyOffline, book?.localBook]);
-
+    }, [bookSeriesId, userToken, lang]);
+    
     const refreshWorlds = useCallback(async function (): Promise<void> {
         setIsLoading(true);
         try {
             if (isSeriesMode) {
-                // Series mode - dual logic
-                let response: SeriesWorldProps[];
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.getSeriesWorldList(entityId);
-                } else {
-                    response = await System.authGetQueryToServer<SeriesWorldProps[]>(
-                        'series/world/list',
-                        userToken,
-                        lang,
-                        {seriesid: entityId}
-                    );
-                }
+                const response: SeriesWorldProps[] = await apiGet<SeriesWorldProps[]>(
+                    'series/world/list',
+                    userToken,
+                    lang,
+                    {seriesid: entityId}
+                );
                 if (response) {
                     const mappedWorlds: WorldProps[] = response.map(function (world: SeriesWorldProps): WorldProps {
                         return {
@@ -206,17 +185,12 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
                 }
             } else {
                 let response: WorldListResponse;
-                if (isCurrentlyOffline()) {
-                    response = await tauri.getWorlds(entityId, true) as unknown as WorldListResponse;
-                } else if (book?.localBook) {
-                    response = await tauri.getWorlds(entityId, true) as unknown as WorldListResponse;
+                if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                    response = await tauri.getWorlds(entityId, book?.tools?.worlds ?? false) as WorldListResponse;
                 } else {
-                    response = await System.authGetQueryToServer<WorldListResponse>(
-                        'book/worlds',
-                        userToken,
-                        lang,
-                        {bookid: entityId}
-                    );
+                    response = await apiGet<WorldListResponse>('book/worlds', userToken, lang, {
+                        bookid: entityId
+                    });
                 }
                 if (response) {
                     setWorlds(response.worlds);
@@ -250,8 +224,8 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
         } finally {
             setIsLoading(false);
         }
-    }, [entityId, isSeriesMode, userToken, lang, book, setBook, errorMessage, t, isCurrentlyOffline]);
-
+    }, [entityId, isSeriesMode, userToken, lang, book, setBook, errorMessage, t]);
+    
     const selectWorld = useCallback(function (worldId: string): void {
         const index: number = worlds.findIndex(function (world: WorldProps): boolean {
             return world.id === worldId;
@@ -260,40 +234,35 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
             setSelectedWorldIndex(index);
         }
     }, [worlds]);
-
-    const updateWorldField = useCallback(function (field: keyof WorldProps, value: string): void {
+    
+    const updateWorldField = useCallback(function (field: WorldTextField, value: string): void {
         setWorlds(function (prev: WorldProps[]): WorldProps[] {
             const updated: WorldProps[] = [...prev];
-            (updated[selectedWorldIndex][field] as string) = value;
-            return updated;
-        });
-    }, [selectedWorldIndex]);
-
-    const updateWorldArrayField = useCallback(function (field: keyof WorldProps, value: unknown): void {
-        setWorlds(function (prev: WorldProps[]): WorldProps[] {
-            const updated: WorldProps[] = [...prev];
-            // @ts-ignore - Le type dépend du champ
             updated[selectedWorldIndex][field] = value;
             return updated;
         });
     }, [selectedWorldIndex]);
-
+    
+    const updateWorldArrayField = useCallback(function (field: WorldElementSection, value: WorldElement[]): void {
+        setWorlds(function (prev: WorldProps[]): WorldProps[] {
+            const updated: WorldProps[] = [...prev];
+            updated[selectedWorldIndex][field] = value;
+            return updated;
+        });
+    }, [selectedWorldIndex]);
+    
     const toggleTool = useCallback(async function (enabled: boolean): Promise<void> {
         if (isSeriesMode) return;
         try {
-            const requestData = {
-                bookId: book?.bookId,
-                toolName: 'worlds',
-                enabled: enabled
-            };
             let response: boolean;
-            if (isCurrentlyOffline() || book?.localBook) {
-                response = await tauri.updateBookToolSetting(requestData.bookId, requestData.toolName, requestData.enabled);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                response = await tauri.updateBookToolSetting(book?.bookId ?? '', 'worlds', enabled);
             } else {
-                response = await System.authPatchToServer<boolean>('book/tool-setting', requestData, userToken, lang);
-                if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === book?.bookId)) {
-                    addToQueue('update_book_tool_setting', {data: requestData});
-                }
+                response = await apiPatch<boolean>('book/tool-setting', {
+                    bookId: book?.bookId,
+                    toolName: 'worlds',
+                    enabled: enabled
+                }, userToken, lang);
             }
             if (response && setBook && book) {
                 setToolEnabled(enabled);
@@ -312,8 +281,8 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
                 errorMessage(e.message);
             }
         }
-    }, [isSeriesMode, book, setBook, userToken, lang, errorMessage, isCurrentlyOffline, localSyncedBooks, addToQueue]);
-
+    }, [isSeriesMode, book, setBook, userToken, lang, errorMessage]);
+    
     const addNewWorld = useCallback(async function (): Promise<void> {
         if (newWorldName.trim() === '') {
             errorMessage(t("worldSetting.newWorldNameError"));
@@ -322,41 +291,30 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
         try {
             let newWorldId: string;
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const addData = {
-                    seriesId: entityId,
-                    name: newWorldName,
-                };
-                if (isCurrentlyOffline() || localSeries) {
-                    newWorldId = await tauri.addSeriesWorld(addData);
-                } else {
-                    newWorldId = await System.authPostToServer<string>(
-                        'series/world/add',
-                        addData,
-                        userToken,
-                        lang
-                    );
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('add_series_world', {data: {...addData, id: newWorldId}});
-                    }
+                newWorldId = await apiPost<string>(
+                    'series/world/add',
+                    {
+                        seriesId: entityId,
+                        name: newWorldName,
+                    },
+                    userToken,
+                    lang
+                );
+                if (!newWorldId) {
+                    errorMessage(t("worldSetting.addWorldError"));
+                    return;
                 }
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                newWorldId = await tauri.addWorld(entityId, newWorldName);
                 if (!newWorldId) {
                     errorMessage(t("worldSetting.addWorldError"));
                     return;
                 }
             } else {
-                const requestData = {
+                newWorldId = await apiPost<string>('book/world/add', {
                     worldName: newWorldName,
                     bookId: entityId,
-                };
-                if (isCurrentlyOffline() || book?.localBook) {
-                    newWorldId = await tauri.addWorld(requestData.bookId || entityId, requestData.worldName, requestData.id, requestData.seriesWorldId);
-                } else {
-                    newWorldId = await System.authPostToServer<string>('book/world/add', requestData, userToken, lang);
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('add_world', {data: {...requestData, id: newWorldId}});
-                    }
-                }
+                }, userToken, lang);
                 if (!newWorldId) {
                     errorMessage(t("worldSetting.addWorldError"));
                     return;
@@ -386,15 +344,14 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
                 errorMessage(t("worldSetting.unknownError"));
             }
         }
-    }, [newWorldName, isSeriesMode, entityId, userToken, lang, errorMessage, t, isCurrentlyOffline, book?.localBook, localSyncedBooks, addToQueue]);
-
-    const saveWorld = useCallback(async function (): Promise<boolean> {
-        if (worlds.length === 0) return false;
+    }, [newWorldName, isSeriesMode, entityId, userToken, lang, errorMessage, t]);
+    
+    const saveWorld = useCallback(async function (): Promise<void> {
+        if (worlds.length === 0) return;
         try {
             const currentWorld: WorldProps = worlds[selectedWorldIndex];
             if (isSeriesMode) {
-                // Series mode - dual logic
-                const updateData = {
+                const response: boolean = await apiPatch<boolean>('series/world/update', {
                     worldId: currentWorld.id,
                     name: currentWorld.name,
                     history: currentWorld.history,
@@ -402,111 +359,62 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
                     economy: currentWorld.economy,
                     religion: currentWorld.religion,
                     languages: currentWorld.languages,
-                };
-                let response: boolean;
-                if (isCurrentlyOffline() || localSeries) {
-                    response = await tauri.updateSeriesWorld(updateData);
-                } else {
-                    response = await System.authPatchToServer<boolean>('series/world/update', updateData, userToken, lang);
-                    if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === entityId)) {
-                        addToQueue('update_series_world', {data: updateData});
-                    }
-                }
+                }, userToken, lang);
                 if (!response) {
                     errorMessage(t("worldSetting.updateWorldError"));
-                    return false;
+                    return;
+                }
+            } else if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                const response: boolean = await tauri.updateWorld(currentWorld);
+                if (!response) {
+                    errorMessage(t("worldSetting.updateWorldError"));
+                    return;
                 }
             } else {
-                const requestData = {
+                const response: boolean = await apiPatch<boolean>('book/world/update', {
                     world: currentWorld,
                     bookId: entityId,
-                };
-                let response: boolean;
-                if (isCurrentlyOffline() || book?.localBook) {
-                    response = await tauri.updateWorld(requestData.world || requestData);
-                } else {
-                    response = await System.authPatchToServer<boolean>('book/world/update', requestData, userToken, lang);
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('update_world', {data: requestData});
-                    }
-                }
+                }, userToken, lang);
                 if (!response) {
                     errorMessage(t("worldSetting.updateWorldError"));
-                    return false;
+                    return;
                 }
             }
             successMessage(t("worldSetting.updateWorldSuccess"));
-            return true;
         } catch (e: unknown) {
             if (e instanceof Error) {
                 errorMessage(e.message);
             } else {
                 errorMessage(t("worldSetting.unknownError"));
             }
-            return false;
         }
-    }, [worlds, selectedWorldIndex, isSeriesMode, entityId, userToken, lang, errorMessage, successMessage, t, isCurrentlyOffline, book?.localBook, localSyncedBooks, addToQueue]);
-
+    }, [worlds, selectedWorldIndex, isSeriesMode, entityId, userToken, lang, errorMessage, successMessage, t]);
+    
     const exportToSeries = useCallback(async function (): Promise<void> {
         const selectedWorld: WorldProps | undefined = worlds[selectedWorldIndex];
         if (!selectedWorld || !bookSeriesId) return;
-
+        
         try {
-            const seriesWorldData = {
+            const seriesWorldId: string = await apiPost<string>('series/world/add', {
                 seriesId: bookSeriesId,
-                name: selectedWorld.name,
-                history: selectedWorld.history || null,
-                politics: selectedWorld.politics || null,
-                economy: selectedWorld.economy || null,
-                religion: selectedWorld.religion || null,
-                languages: selectedWorld.languages || null,
-            };
-
-            let seriesWorldId: string;
-            if (isCurrentlyOffline() || book?.localBook) {
-                // Mode offline ou livre local → Tauri
-                seriesWorldId = await tauri.addSeriesWorld(seriesWorldData);
-            } else {
-                // Mode online → Serveur
-                seriesWorldId = await System.authPostToServer<string>('series/world/add', {
-                    seriesId: bookSeriesId,
-                    world: {
-                        name: selectedWorld.name,
-                        history: selectedWorld.history || null,
-                        politics: selectedWorld.politics || null,
-                        economy: selectedWorld.economy || null,
-                        religion: selectedWorld.religion || null,
-                        languages: selectedWorld.languages || null,
-                    }
-                }, userToken, lang);
-                // Si la série a une copie locale → addToQueue
-                if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === bookSeriesId)) {
-                    addToQueue('add_series_world', {data: {...seriesWorldData, id: seriesWorldId}});
+                world: {
+                    name: selectedWorld.name,
+                    history: selectedWorld.history || null,
+                    politics: selectedWorld.politics || null,
+                    economy: selectedWorld.economy || null,
+                    religion: selectedWorld.religion || null,
+                    languages: selectedWorld.languages || null,
                 }
-            }
-
+            }, userToken, lang);
+            
             if (seriesWorldId) {
-                const updateData = {
+                const updateResponse: boolean = await apiPost<boolean>('book/world/update', {
                     world: {
                         ...selectedWorld,
                         seriesWorldId: seriesWorldId
                     },
-                    bookId: entityId,
-                };
-
-                let updateResponse: boolean;
-                if (isCurrentlyOffline() || book?.localBook) {
-                    // Mode offline ou livre local → Tauri
-                    updateResponse = await tauri.updateWorld(updateData.world || updateData);
-                } else {
-                    // Mode online → Serveur
-                    updateResponse = await System.authPostToServer<boolean>('book/world/update', updateData, userToken, lang);
-                    // Si le livre a une copie locale → addToQueue
-                    if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                        addToQueue('update_world', {data: updateData});
-                    }
-                }
-
+                }, userToken, lang);
+                
                 if (updateResponse) {
                     setWorlds(function (prev: WorldProps[]): WorldProps[] {
                         const updated: WorldProps[] = [...prev];
@@ -545,39 +453,31 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
                 errorMessage(e.message);
             }
         }
-    }, [worlds, selectedWorldIndex, bookSeriesId, userToken, lang, successMessage, errorMessage, t, isCurrentlyOffline, book, addToQueue, localSyncedBooks, localSyncedSeries, entityId]);
-
+    }, [worlds, selectedWorldIndex, bookSeriesId, userToken, lang, successMessage, errorMessage, t]);
+    
     const importFromSeries = useCallback(async function (seriesWorldId: string): Promise<void> {
         const seriesWorld: SeriesWorldProps | undefined = seriesWorlds.find(function (w: SeriesWorldProps): boolean {
             return w.id === seriesWorldId;
         });
         if (!seriesWorld) return;
-
+        
         try {
-            const requestData = {
-                worldName: seriesWorld.name,
-                bookId: entityId,
-                seriesWorldId: seriesWorldId,
-            };
-
             let worldId: string;
-            if (isCurrentlyOffline() || book?.localBook) {
-                // Mode offline ou livre local → Tauri
-                worldId = await tauri.addWorld(requestData.bookId || entityId, requestData.worldName, requestData.id, requestData.seriesWorldId);
+            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
+                worldId = await tauri.addWorld(entityId, seriesWorld.name, undefined, seriesWorldId);
             } else {
-                // Mode online → Serveur
-                worldId = await System.authPostToServer<string>('book/world/add', requestData, userToken, lang);
-                // Si le livre a une copie locale → addToQueue
-                if (localSyncedBooks.find((sb: SyncedBook): boolean => sb.id === entityId)) {
-                    addToQueue('add_world', {data: {...requestData, id: worldId}});
-                }
+                worldId = await apiPost<string>('book/world/add', {
+                    worldName: seriesWorld.name,
+                    bookId: entityId,
+                    seriesWorldId: seriesWorldId,
+                }, userToken, lang);
             }
-
+            
             if (!worldId) {
                 errorMessage(t("worldSetting.importError"));
                 return;
             }
-
+            
             const newWorld: WorldProps = {
                 id: worldId,
                 name: seriesWorld.name,
@@ -611,8 +511,8 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
                 errorMessage(e.message);
             }
         }
-    }, [seriesWorlds, entityId, userToken, lang, errorMessage, t, isCurrentlyOffline, book, addToQueue, localSyncedBooks]);
-
+    }, [seriesWorlds, entityId, userToken, lang, errorMessage, t]);
+    
     const getSeriesWorldForCurrentWorld = useCallback(function (): SeriesWorldProps | null {
         const currentWorld: WorldProps | undefined = worlds[selectedWorldIndex];
         if (!currentWorld?.seriesWorldId) return null;
@@ -620,7 +520,7 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
             return world.id === currentWorld.seriesWorldId;
         }) || null;
     }, [worlds, selectedWorldIndex, seriesWorlds]);
-
+    
     // Navigation functions
     const enterDetailMode = useCallback(function (worldId: string): void {
         const index: number = worlds.findIndex(function (world: WorldProps): boolean {
@@ -632,21 +532,17 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
             setWorldBackup(null);
         }
     }, [worlds]);
-
+    
     const enterEditMode = useCallback(function (): void {
         if (worlds.length > 0 && selectedWorldIndex >= 0) {
             setWorldBackup({...worlds[selectedWorldIndex]});
         }
         setViewMode('edit');
     }, [worlds, selectedWorldIndex]);
-
+    
     const exitEditMode = useCallback(async function (save: boolean): Promise<void> {
         if (save) {
-            const success: boolean = await saveWorld();
-            if (!success) {
-                // Stay in edit mode on error
-                return;
-            }
+            await saveWorld();
             if (worldBackup) {
                 setViewMode('detail');
             } else {
@@ -666,13 +562,13 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
         }
         setWorldBackup(null);
     }, [saveWorld, worldBackup, selectedWorldIndex]);
-
+    
     const backToList = useCallback(function (): void {
         setSelectedWorldIndex(0);
         setWorldBackup(null);
         setViewMode('list');
     }, []);
-
+    
     return {
         // State
         worlds,
@@ -685,11 +581,11 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
         bookSeriesId,
         showAddNewWorld,
         newWorldName,
-
+        
         // Navigation state
         viewMode,
         worldBackup,
-
+        
         // Actions
         selectWorld,
         addNewWorld,
@@ -705,7 +601,7 @@ export function useWorlds(config: UseWorldsConfig): UseWorldsReturn {
         setNewWorldName,
         setWorlds,
         getSeriesWorldForCurrentWorld,
-
+        
         // Navigation actions
         enterDetailMode,
         enterEditMode,
diff --git a/hooks/useSyncBooks.ts b/hooks/useSyncBooks.ts
index 542ee1e..e7742a1 100644
--- a/hooks/useSyncBooks.ts
+++ b/hooks/useSyncBooks.ts
@@ -1,13 +1,13 @@
 import {useContext} from 'react';
-import System from '@/lib/models/System';
+import {apiGet, apiPost} from '@/lib/api/client';
 import {SessionContext} from '@/context/SessionContext';
 import {LangContext} from '@/context/LangContext';
 import {AlertContext} from '@/context/AlertContext';
 import OfflineContext from '@/context/OfflineContext';
 import {BooksSyncContext} from '@/context/BooksSyncContext';
-import {CompleteBook} from '@/lib/models/Book';
-import {BookSyncCompare, SyncedBook} from '@/lib/models/SyncedBook';
-import {useTranslations} from 'next-intl';
+import {CompleteBook} from '@/lib/types/book-tables';
+import {BookSyncCompare, SyncedBook} from '@/lib/types/synced-book';
+import {useTranslations} from '@/lib/i18n';
 import * as tauri from '@/lib/tauri';
 
 interface RemovedItemRecord {
@@ -52,7 +52,7 @@ export default function useSyncBooks() {
                 errorMessage(t('bookCard.uploadError'));
                 return false;
             }
-            const response: boolean = await System.authPostToServer('book/sync/upload', {
+            const response: boolean = await apiPost('book/sync/upload', {
                 book: bookToSync
             }, session.accessToken, lang);
             if (!response) {
@@ -82,7 +82,7 @@ export default function useSyncBooks() {
         if (isCurrentlyOffline()) return false;
 
         try {
-            const response: CompleteBook = await System.authGetQueryToServer('book/sync/download', session.accessToken, lang, {bookId});
+            const response: CompleteBook = await apiGet('book/sync/download', session.accessToken, lang, {bookId});
             if (!response) {
                 errorMessage(t('bookCard.downloadError'));
                 return false;
@@ -120,7 +120,7 @@ export default function useSyncBooks() {
                 errorMessage(t('bookCard.syncFromServerError'));
                 return false;
             }
-            const response: CompleteBook = await System.authPostToServer('book/sync/server-to-client', {
+            const response: CompleteBook = await apiPost('book/sync/server-to-client', {
                 bookToSync: bookToFetch
             }, session.accessToken, lang);
             if (!response) {
@@ -160,7 +160,7 @@ export default function useSyncBooks() {
                 errorMessage(t('bookCard.syncToServerError'));
                 return false;
             }
-            const response: boolean = await System.authPatchToServer('book/sync/client-to-server', {
+            const response: boolean = await apiPatch('book/sync/client-to-server', {
                 book: bookToSync
             }, session.accessToken, lang);
             if (!response) {
@@ -207,7 +207,7 @@ export default function useSyncBooks() {
 
                     const localTombstones: RemovedItemRecord[] = await tauri.getTombstonesSince(lastOnlineTimestamp) as RemovedItemRecord[];
 
-                    const serverResponse: SyncedBooksResponse = await System.authPostToServer<SyncedBooksResponse>(
+                    const serverResponse: SyncedBooksResponse = await apiPost<SyncedBooksResponse>(
                         'books/synced',
                         { lastOnlineTimestamp, tombstones: localTombstones },
                         session.accessToken,
@@ -219,7 +219,7 @@ export default function useSyncBooks() {
                     await tauri.applyBookTombstones(serverResponse.tombstones as tauri.TombstoneRecord[]);
                 } else {
                     // No local DB but online - just get server books without tombstones
-                    const serverResponse: SyncedBooksResponse = await System.authPostToServer<SyncedBooksResponse>(
+                    const serverResponse: SyncedBooksResponse = await apiPost<SyncedBooksResponse>(
                         'books/synced',
                         { lastOnlineTimestamp: 0, tombstones: [] },
                         session.accessToken,
diff --git a/hooks/useSyncSeries.ts b/hooks/useSyncSeries.ts
index a220bd6..a0c820a 100644
--- a/hooks/useSyncSeries.ts
+++ b/hooks/useSyncSeries.ts
@@ -1,12 +1,12 @@
 import { useContext } from 'react';
-import System from '@/lib/models/System';
+import {apiGet, apiPost, apiPatch} from '@/lib/api/client';
 import { SessionContext } from '@/context/SessionContext';
 import { LangContext } from '@/context/LangContext';
 import { AlertContext } from '@/context/AlertContext';
 import OfflineContext from '@/context/OfflineContext';
 import { SeriesSyncContext } from '@/context/SeriesSyncContext';
-import { SeriesSyncCompare, SyncedSeries } from '@/lib/models/SyncedSeries';
-import { useTranslations } from 'next-intl';
+import { SeriesSyncCompare, SyncedSeries } from '@/lib/types/synced-series';
+import { useTranslations } from '@/lib/i18n';
 import * as tauri from '@/lib/tauri';
 
 interface RemovedItemRecord {
@@ -79,7 +79,7 @@ export default function useSyncSeries() {
                 return false;
             }
 
-            const response: boolean = await System.authPostToServer('series/sync/upload', {
+            const response: boolean = await apiPost('series/sync/upload', {
                 series: seriesToSync
             }, session.accessToken, lang);
 
@@ -119,7 +119,7 @@ export default function useSyncSeries() {
         if (isCurrentlyOffline()) return false;
 
         try {
-            const response: CompleteSeries = await System.authGetQueryToServer(
+            const response: CompleteSeries = await apiGet(
                 'series/sync/download',
                 session.accessToken,
                 lang,
@@ -177,7 +177,7 @@ export default function useSyncSeries() {
                 return false;
             }
 
-            const response: CompleteSeries = await System.authPostToServer(
+            const response: CompleteSeries = await apiPost(
                 'series/sync/server-to-client',
                 { seriesToSync: seriesToFetch },
                 session.accessToken,
@@ -237,7 +237,7 @@ export default function useSyncSeries() {
                 return false;
             }
 
-            const response: boolean = await System.authPatchToServer(
+            const response: boolean = await apiPatch(
                 'series/sync/client-to-server',
                 { series: seriesToSync },
                 session.accessToken,
@@ -293,7 +293,7 @@ export default function useSyncSeries() {
 
                     const localTombstones: RemovedItemRecord[] = await tauri.getTombstonesSince(lastOnlineTimestamp) as RemovedItemRecord[];
 
-                    const serverResponse: SyncedSeriesResponse = await System.authPostToServer<SyncedSeriesResponse>(
+                    const serverResponse: SyncedSeriesResponse = await apiPost<SyncedSeriesResponse>(
                         'series/synced',
                         { lastOnlineTimestamp, tombstones: localTombstones },
                         session.accessToken,
@@ -305,7 +305,7 @@ export default function useSyncSeries() {
                     await tauri.applySeriesTombstones(serverResponse.tombstones as tauri.TombstoneRecord[]);
                 } else {
                     // No local DB but online - just get server series without tombstones
-                    const serverResponse: SyncedSeriesResponse = await System.authPostToServer<SyncedSeriesResponse>(
+                    const serverResponse: SyncedSeriesResponse = await apiPost<SyncedSeriesResponse>(
                         'series/synced',
                         { lastOnlineTimestamp: 0, tombstones: [] },
                         session.accessToken,
diff --git a/lib/api/client.ts b/lib/api/client.ts
new file mode 100644
index 0000000..ccfa887
--- /dev/null
+++ b/lib/api/client.ts
@@ -0,0 +1,94 @@
+import axios, {AxiosResponse, Method} from "axios";
+import {configs, isDesktop} from "@/lib/configs";
+
+type ContentType = 'application/json' | 'multipart/form-data';
+
+interface ApiRequestConfig {
+    method: Method;
+    url: string;
+    auth: string;
+    lang?: string;
+    params?: Record<string, unknown>;
+    data?: unknown;
+    contentType?: ContentType;
+}
+
+function handleApiError(error: unknown): never {
+    if (axios.isAxiosError(error)) {
+        const serverMessage: string = error.response?.data?.message || error.response?.data || error.message;
+        throw new Error(serverMessage);
+    } else if (error instanceof Error) {
+        throw new Error(error.message);
+    }
+    throw new Error('An unexpected error occurred');
+}
+
+async function apiRequest<T>(config: ApiRequestConfig): Promise<T> {
+    try {
+        const headers: Record<string, string> = {
+            'Authorization': `Bearer ${config.auth}`
+        };
+
+        if (config.contentType) {
+            headers['Content-Type'] = config.contentType;
+        }
+
+        const response: AxiosResponse<T> = await axios({
+            method: config.method,
+            headers,
+            params: {
+                lang: config.lang ?? 'fr',
+                plateforme: isDesktop ? 'desktop' : 'web',
+                ...config.params
+            },
+            url: configs.apiUrl + config.url,
+            data: config.data
+        });
+
+        return response.data;
+    } catch (error: unknown) {
+        handleApiError(error);
+    }
+}
+
+export async function apiGet<T>(url: string, auth: string, lang: string = "fr", params: Record<string, unknown> = {}): Promise<T> {
+    return apiRequest<T>({method: 'GET', url, auth, lang, params});
+}
+
+export async function apiPost<T>(url: string, data: object, auth: string, lang: string = "fr"): Promise<T> {
+    return apiRequest<T>({method: 'POST', url, auth, lang, data, contentType: 'application/json'});
+}
+
+export async function apiPut<T>(url: string, data: object, auth: string, lang: string = "fr"): Promise<T> {
+    return apiRequest<T>({method: 'PUT', url, auth, lang, data, contentType: 'application/json'});
+}
+
+export async function apiPatch<T>(url: string, data: object, auth: string, lang: string = "fr"): Promise<T> {
+    return apiRequest<T>({method: 'PATCH', url, auth, lang, data, contentType: 'application/json'});
+}
+
+export async function apiDelete<T>(url: string, data: object, auth: string, lang: string = "fr"): Promise<T> {
+    return apiRequest<T>({method: 'DELETE', url, auth, lang, data, contentType: 'application/json'});
+}
+
+export async function apiPostPublic<T>(url: string, data: object, lang: string = "fr"): Promise<T> {
+    try {
+        const response: AxiosResponse<T> = await axios({
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            params: {lang, plateforme: isDesktop ? 'desktop' : 'web'},
+            url: configs.apiUrl + url,
+            data
+        });
+        return response.data;
+    } catch (error: unknown) {
+        handleApiError(error);
+    }
+}
+
+export async function apiUpload<T>(url: string, file: File, auth: string, lang: string = "fr"): Promise<T> {
+    const formData: FormData = new FormData();
+    formData.append('file', file);
+
+    return apiRequest<T>({method: 'POST', url, auth, lang, data: formData, contentType: 'multipart/form-data'});
+}
diff --git a/lib/configs.ts b/lib/configs.ts
index 467f669..5944c76 100644
--- a/lib/configs.ts
+++ b/lib/configs.ts
@@ -9,11 +9,12 @@ export interface Configs {
 }
 
 const isProduction: boolean = false;
+export const isDesktop: boolean = true;
 
 export const configs: Configs = {
     apiUrl: isProduction ? 'https://api.eritors.com/' : 'http://localhost:3001/',
     baseUrl: isProduction ? 'https://scribe.eritors.com/' : 'http://localhost:3000/',
-    appName: 'ERitors Scribe',
-    appDescription: 'ERitors Scribe est une application de prise de notes et d\'écriture collaborative.',
+    appName: 'Eritors Scribe',
+    appDescription: 'Eritors Scribe est une application de prise de notes et d\'écriture collaborative.',
     appVersion: packageJson.version,
 };
\ No newline at end of file
diff --git a/lib/constants/book.ts b/lib/constants/book.ts
new file mode 100644
index 0000000..328c587
--- /dev/null
+++ b/lib/constants/book.ts
@@ -0,0 +1,9 @@
+import {SelectBoxProps} from "@/components/form/SelectBox";
+
+export const bookTypes: SelectBoxProps[] = [
+    {label: 'bookTypes.short', value: 'short'},
+    {label: 'bookTypes.novelette', value: 'novelette'},
+    {label: 'bookTypes.novella', value: 'long'},
+    {label: 'bookTypes.chapbook', value: 'chapbook'},
+    {label: 'bookTypes.novel', value: 'novel'},
+];
diff --git a/lib/constants/chapter.ts b/lib/constants/chapter.ts
new file mode 100644
index 0000000..fe57d98
--- /dev/null
+++ b/lib/constants/chapter.ts
@@ -0,0 +1,9 @@
+import {SelectBoxProps} from "@/components/form/SelectBox";
+
+export const chapterVersions: SelectBoxProps[] = [
+    {value: '1', label: 'chapterVersions.prompt'},
+    {value: '2', label: 'chapterVersions.draft'},
+    {value: '3', label: 'chapterVersions.refine'},
+    {value: '4', label: 'chapterVersions.review'},
+    {value: '5', label: 'chapterVersions.final'},
+];
diff --git a/lib/constants/character.ts b/lib/constants/character.ts
new file mode 100644
index 0000000..11ad9ae
--- /dev/null
+++ b/lib/constants/character.ts
@@ -0,0 +1,153 @@
+import {
+    Zap,
+    Box,
+    Brain,
+    Target,
+    AlertTriangle,
+    Fingerprint,
+    Flame,
+    Ghost,
+    Heart,
+    HeartCrack,
+    Users,
+    Quote,
+    Route,
+    Ruler,
+    Shield,
+    UserX,
+    Wrench
+} from 'lucide-react';
+import {SelectBoxProps} from "@/components/form/SelectBox";
+import {CharacterElement} from "@/lib/types/character";
+
+export const characterCategories: SelectBoxProps[] = [
+    {value: 'none', label: 'characterCategories.none'},
+    {value: 'main', label: 'characterCategories.main'},
+    {value: 'secondary', label: 'characterCategories.secondary'},
+    {value: 'recurring', label: 'characterCategories.recurring'},
+];
+
+export const characterStatus: SelectBoxProps[] = [
+    {value: 'alive', label: 'characterStatus.alive'},
+    {value: 'dead', label: 'characterStatus.dead'},
+    {value: 'unknown', label: 'characterStatus.unknown'},
+];
+
+export const basicCharacterElements: CharacterElement[] = [
+    {
+        title: 'Descriptions physiques',
+        section: 'physical',
+        placeholder: 'Nouvelle Description Physique',
+        icon: Ruler,
+    },
+    {
+        title: 'Descriptions psychologiques',
+        section: 'psychological',
+        placeholder: 'Nouvelle Description Psychologique',
+        icon: Brain,
+    },
+];
+
+export const advancedCharacterElements: CharacterElement[] = [
+    {
+        title: 'Signes distinctifs',
+        section: 'distinguishingMarks',
+        placeholder: 'Nouveau signe distinctif',
+        icon: Fingerprint,
+    },
+    {
+        title: 'Arc du personnage',
+        section: 'arc',
+        placeholder: 'Nouvelle étape de l\'arc',
+        icon: Route,
+    },
+    {
+        title: 'Secrets',
+        section: 'secrets',
+        placeholder: 'Nouveau secret',
+        icon: UserX,
+    },
+    {
+        title: 'Peurs',
+        section: 'fears',
+        placeholder: 'Nouvelle peur',
+        icon: Ghost,
+    },
+    {
+        title: 'Défauts',
+        section: 'flaws',
+        placeholder: 'Nouveau défaut',
+        icon: HeartCrack,
+    },
+    {
+        title: 'Croyances',
+        section: 'beliefs',
+        placeholder: 'Nouvelle croyance',
+        icon: Heart,
+    },
+    {
+        title: 'Conflits internes',
+        section: 'conflicts',
+        placeholder: 'Nouveau conflit',
+        icon: Zap,
+    },
+    {
+        title: 'Citations',
+        section: 'quotes',
+        placeholder: 'Nouvelle citation',
+        icon: Quote,
+    },
+    {
+        title: 'Relations',
+        section: 'relations',
+        placeholder: 'Nouveau Nom de Relation',
+        icon: Users,
+    },
+    {
+        title: 'Compétences',
+        section: 'skills',
+        placeholder: 'Nouvelle Compétence',
+        icon: Wrench,
+    },
+    {
+        title: 'Faiblesses',
+        section: 'weaknesses',
+        placeholder: 'Nouvelle Faiblesse',
+        icon: AlertTriangle,
+    },
+    {
+        title: 'Forces',
+        section: 'strengths',
+        placeholder: 'Nouvelle Force',
+        icon: Shield,
+    },
+    {
+        title: 'Objectifs',
+        section: 'goals',
+        placeholder: 'Nouvel Objectif',
+        icon: Target,
+    },
+    {
+        title: 'Motivations',
+        section: 'motivations',
+        placeholder: 'Nouvelle Motivation',
+        icon: Flame,
+    },
+    {
+        title: 'Objets importants',
+        section: 'items',
+        placeholder: 'Nouvel objet',
+        icon: Box,
+    },
+    {
+        title: 'Affiliations',
+        section: 'affiliations',
+        placeholder: 'Nouvelle affiliation',
+        icon: Users,
+    },
+];
+
+export const characterElementCategory: CharacterElement[] = [
+    ...basicCharacterElements,
+    ...advancedCharacterElements,
+];
diff --git a/lib/constants/spell.ts b/lib/constants/spell.ts
new file mode 100644
index 0000000..9046f00
--- /dev/null
+++ b/lib/constants/spell.ts
@@ -0,0 +1,35 @@
+import {SelectBoxProps} from "@/components/form/SelectBox";
+import {SpellEditState} from "@/lib/types/spell";
+
+export const initialSpellState: SpellEditState = {
+    id: null,
+    name: '',
+    description: '',
+    appearance: '',
+    tags: [],
+    powerLevel: null,
+    components: null,
+    limitations: null,
+    notes: null,
+    seriesSpellId: null,
+};
+
+export const spellPowerLevels: SelectBoxProps[] = [
+    {value: 'none', label: 'spellPowerLevels.none'},
+    {value: 'cantrip', label: 'spellPowerLevels.cantrip'},
+    {value: 'novice', label: 'spellPowerLevels.novice'},
+    {value: 'apprentice', label: 'spellPowerLevels.apprentice'},
+    {value: 'journeyman', label: 'spellPowerLevels.journeyman'},
+    {value: 'expert', label: 'spellPowerLevels.expert'},
+    {value: 'master', label: 'spellPowerLevels.master'},
+    {value: 'grandmaster', label: 'spellPowerLevels.grandmaster'},
+    {value: 'legendary', label: 'spellPowerLevels.legendary'},
+    {value: 'divine', label: 'spellPowerLevels.divine'},
+];
+
+export const defaultTagColors: string[] = [
+    '#51AE84', '#3A8B69', '#2196F3', '#1976D2',
+    '#FFA726', '#FF9800', '#EF5350', '#E53935',
+    '#AB47BC', '#9C27B0', '#26A69A', '#00897B',
+    '#5C6BC0', '#3F51B5', '#EC407A', '#D81B60',
+];
diff --git a/lib/constants/story.ts b/lib/constants/story.ts
new file mode 100644
index 0000000..2a8fb63
--- /dev/null
+++ b/lib/constants/story.ts
@@ -0,0 +1,135 @@
+import {RadioBoxValue} from "@/components/form/RadioBox";
+import {SelectBoxProps} from "@/components/form/SelectBox";
+
+export const storyStates: RadioBoxValue[] = [
+    {label: 'Suite', value: 0},
+    {label: 'Début', value: 1},
+    {label: 'Fin', value: 2},
+    {label: 'Introduction', value: 3},
+    {label: 'Final', value: 4},
+];
+
+export const beginnerPredefinedType: SelectBoxProps[] = [
+    {label: `Thème défini disponible.`, value: '0'},
+    {label: `Féerique`, value: '3'},
+    {label: 'Romance historique', value: '10'},
+    {label: 'Conte de fées moderne', value: '13'},
+    {label: 'Romance contemporaine', value: '17'},
+    {label: 'Conte moral', value: '20'},
+];
+
+export const intermediatePredefinedType: SelectBoxProps[] = [
+    {label: `Thème défini disponible.`, value: '0'},
+    {label: `Histoire d'horreur jeune adulte`, value: '1'},
+    {label: 'Féerique', value: '3'},
+    {label: 'Romance dramatique', value: '5'},
+    {label: 'Fantastique sombre', value: '9'},
+    {label: 'Romance historique', value: '10'},
+    {label: 'Science-fiction utopique', value: '12'},
+    {label: 'Conte de fées moderne', value: '13'},
+    {label: 'Drame familial', value: '14'},
+    {label: 'Romance contemporaine', value: '17'},
+    {label: 'Science-fiction post-apocalyptique', value: '19'},
+    {label: 'Conte moral', value: '20'},
+];
+
+export const advancedPredefinedType: SelectBoxProps[] = [
+    {label: `Thème défini disponible.`, value: '0'},
+    {label: `Histoire d'horreur jeune adulte`, value: '1'},
+    {label: `Horreur adulte`, value: '2'},
+    {label: 'Féerique', value: '3'},
+    {label: 'Science-fiction dystopique', value: '4'},
+    {label: 'Romance dramatique', value: '5'},
+    {label: 'Aventure épique', value: '6'},
+    {label: 'Conte philosophique', value: '7'},
+    {label: 'Thriller psychologique', value: '8'},
+    {label: 'Fantastique sombre', value: '9'},
+    {label: 'Romance historique', value: '10'},
+    {label: 'Polar noir', value: '11'},
+    {label: 'Science-fiction utopique', value: '12'},
+    {label: 'Conte de fées moderne', value: '13'},
+    {label: 'Drame familial', value: '14'},
+    {label: 'Aventure maritime', value: '15'},
+    {label: 'Fantaisie épique', value: '16'},
+    {label: 'Romance contemporaine', value: '17'},
+    {label: "Thriller d'espionnage", value: '18'},
+    {label: 'Science-fiction post-apocalyptique', value: '19'},
+    {label: 'Conte moral', value: '20'},
+];
+
+export const beginnerNarrativePersons: SelectBoxProps[] = [
+    {label: 'Sélectionner un type narrative.', value: '0'},
+    {label: 'Première personne (Je acteur) - Implication émotionnelle', value: '1'},
+    {label: 'Troisième omnisciente - Narration divine, savoir total', value: '3'},
+];
+
+export const intermediateNarrativePersons: SelectBoxProps[] = [
+    {label: 'Sélectionner un type narrative.', value: '0'},
+    {label: 'Première personne (Je acteur) - Implication émotionnelle', value: '1'},
+    {label: 'Première personne (Je témoin) - Observation extérieure', value: '2'},
+    {label: 'Troisième omnisciente - Narration divine, savoir total', value: '3'},
+    {label: 'Troisième limitée - Focus sur 1 personnage', value: '4'},
+];
+
+export const advancedNarrativePersons: SelectBoxProps[] = [
+    {label: 'Sélectionner un type narrative.', value: '0'},
+    {label: 'Première personne (Je acteur) - Implication émotionnelle', value: '1'},
+    {label: 'Première personne (Je témoin) - Observation extérieure', value: '2'},
+    {label: 'Troisième omnisciente - Narration divine, savoir total', value: '3'},
+    {label: 'Troisième limitée - Focus sur 1 personnage', value: '4'},
+    {label: 'Deuxième personne (Tu) - Immersion/confrontation', value: '5'},
+    {label: 'Nous collectif - Voix chorale, destin partagé', value: '6'},
+];
+
+export const langues: SelectBoxProps[] = [
+    {label: 'Sélectionner une langue.', value: '0'},
+    {label: 'Français Canada', value: '1'},
+    {label: 'Français France', value: '2'},
+    {label: 'Français Québécois', value: '3'},
+    {label: 'English Canada', value: '4'},
+];
+
+export const beginnerDialogueTypes: SelectBoxProps[] = [
+    {label: 'Sélectionner un type de dialogue.', value: '0'},
+    {label: 'Dialogue direct - Paroles exactes des personnages', value: '1'},
+    {label: 'Dialogue indirect - Paroles résumées par le narrateur', value: '2'},
+];
+
+export const intermediateDialogueTypes: SelectBoxProps[] = [
+    {label: 'Sélectionner un type de dialogue.', value: '0'},
+    {label: 'Dialogue direct - Paroles exactes des personnages', value: '1'},
+    {label: 'Dialogue indirect - Paroles résumées par le narrateur', value: '2'},
+    {label: 'Dialogue mixte - Mélange de dialogue direct et indirect', value: '3'},
+];
+
+export const advancedDialogueTypes: SelectBoxProps[] = [
+    {label: 'Sélectionner un type de dialogue.', value: '0'},
+    {label: 'Dialogue direct - Paroles exactes des personnages', value: '1'},
+    {label: 'Dialogue indirect - Paroles résumées par le narrateur', value: '2'},
+    {label: 'Dialogue mixte - Mélange de dialogue direct et indirect', value: '3'},
+    {label: 'Monologue intérieur - Interaction avec soi-même', value: '4'},
+];
+
+export const verbalTime: SelectBoxProps[] = [
+    {label: 'Sélectionner un temps verbal.', value: '0'},
+    {label: 'Passé Simple', value: '1'},
+    {label: 'Passé Immédiat → Témoignages, récits autobiographiques', value: '2'},
+    {label: 'Passé Profond → Flashbacks littéraires, tragédies', value: '3'},
+    {label: 'Présent Brut → Urgence, immersion totale', value: '4'},
+    {label: 'Présent Réflexif → Méditations philosophiques', value: '5'},
+    {label: 'Futur Projeté → Prophéties, plans stratégiques', value: '6'},
+    {label: 'Futur Catastrophe → Dystopies, récits post-apocalyptiques', value: '7'},
+    {label: 'Imparfait Onirique → Rêves, souvenirs déformés', value: '8'},
+    {label: 'Conditionnel Hypothétique → Uchronies, réalités alternatives', value: '9'},
+    {label: 'Subjonctif Angoissé → Drames psychologiques, dilemmes', value: '10'},
+    {label: 'Mélancolie Composée → Regrets, introspection nostalgique', value: '11'},
+    {label: 'Urgence Narrative → Urgences', value: '12'},
+    {label: 'Présent Émotionnel → Émotions intenses', value: '13'},
+    {label: 'Présent Introspectif → Réflexions profondes', value: '14'},
+    {label: 'Présent Historique → Histoires historiques', value: '15'},
+    {label: 'Passé Réflexif → Récits introspectifs', value: '16'},
+    {label: 'Futur Prophétique → Prophéties, visions apocalyptiques', value: '17'},
+    {label: 'Conditionnel Visionnaire → Mondes parallèles', value: '18'},
+    {label: 'Imparfait Poétique → Lyrisme, poésie narrative', value: '19'},
+    {label: 'Second Person Narrative → Immersion totale', value: '20'},
+];
diff --git a/lib/constants/user.ts b/lib/constants/user.ts
new file mode 100644
index 0000000..35f4b36
--- /dev/null
+++ b/lib/constants/user.ts
@@ -0,0 +1,8 @@
+import {SelectBoxProps} from "@/components/form/SelectBox";
+
+export const writingLevel: SelectBoxProps[] = [
+    {value: '0', label: 'Sélectionner un niveau d\'écriture'},
+    {value: '1', label: 'Je suis débutant'},
+    {value: '2', label: 'Je suis intermédiaire'},
+    {value: '3', label: 'Je suis avancé'},
+];
diff --git a/lib/constants/world.ts b/lib/constants/world.ts
new file mode 100644
index 0000000..bacc30c
--- /dev/null
+++ b/lib/constants/world.ts
@@ -0,0 +1,30 @@
+import {
+    Crown,
+    AlertTriangle,
+    Flag,
+    Gavel,
+    Factory,
+    Leaf,
+    Mountain,
+    Music,
+    ArrowLeftRight,
+    Snowflake,
+    UserCog,
+    Users
+} from 'lucide-react';
+import {ElementSection} from "@/lib/types/world";
+
+export const elementSections: ElementSection[] = [
+    {title: 'Lois', section: 'laws', icon: Gavel},
+    {title: 'Biomes', section: 'biomes', icon: Mountain},
+    {title: 'Problèmes', section: 'issues', icon: AlertTriangle},
+    {title: 'Coutumes', section: 'customs', icon: ArrowLeftRight},
+    {title: 'Royaumes', section: 'kingdoms', icon: Flag},
+    {title: 'Climat', section: 'climate', icon: Snowflake},
+    {title: 'Ressources', section: 'resources', icon: Factory},
+    {title: 'Faune', section: 'wildlife', icon: Leaf},
+    {title: 'Arts', section: 'arts', icon: Music},
+    {title: 'Groupes ethniques', section: 'ethnicGroups', icon: Users},
+    {title: 'Classes sociales', section: 'socialClasses', icon: UserCog},
+    {title: 'Personnages importants', section: 'importantCharacters', icon: Crown},
+];
diff --git a/lib/i18n.ts b/lib/i18n.ts
new file mode 100644
index 0000000..f2a5222
--- /dev/null
+++ b/lib/i18n.ts
@@ -0,0 +1,30 @@
+import i18n from 'i18next';
+import {initReactI18next, useTranslation} from 'react-i18next';
+import fr from '@/lib/locales/fr.json';
+import en from '@/lib/locales/en.json';
+
+i18n.use(initReactI18next).init({
+    resources: {
+        fr: {translation: fr},
+        en: {translation: en},
+    },
+    lng: 'fr',
+    fallbackLng: 'fr',
+    interpolation: {escapeValue: false},
+});
+
+export function useTranslations(namespace?: string) {
+    const {t} = useTranslation();
+    if (namespace) {
+        return (key: string, params?: Record<string, unknown>) =>
+            t(`${namespace}.${key}`, params as Record<string, string>);
+    }
+    return (key: string, params?: Record<string, unknown>) =>
+        t(key, params as Record<string, string>);
+}
+
+export function changeLanguage(lang: string) {
+    i18n.changeLanguage(lang);
+}
+
+export {i18n};
diff --git a/lib/image.ts b/lib/image.ts
new file mode 100644
index 0000000..08081b5
--- /dev/null
+++ b/lib/image.ts
@@ -0,0 +1 @@
+export const Image = 'img';
diff --git a/lib/locales/en.json b/lib/locales/en.json
index 1a7ca3b..b196706 100644
--- a/lib/locales/en.json
+++ b/lib/locales/en.json
@@ -13,121 +13,6 @@
     "activate": "Activate",
     "cancel": "Cancel"
   },
-  "loginPage": {
-    "title": "Login",
-    "welcome": "Welcome to ERitors",
-    "orSocial": "or continue with",
-    "noAccount": "Don't have an account yet?",
-    "createAccount": "Create one here",
-    "backToLogin": "Back to login",
-    "offlineWarning": {
-      "title": "First sync required",
-      "message": "An Internet connection is required for your first login to sync your data."
-    }
-  },
-  "loginForm": {
-    "error": {
-      "emailRequired": "Your email must be filled in.",
-      "passwordRequired": "Your password must be filled in.",
-      "emailLength": "Your email must have at least 3 characters.",
-      "emailInvalidChars": "Your email contains invalid characters.",
-      "connection": "An error occurred during login.",
-      "server": "A server error occurred during login.",
-      "unknown": "An unknown error occurred during login."
-    },
-    "fields": {
-      "email": {
-        "label": "Email address",
-        "placeholder": "your.email@example.com"
-      },
-      "password": {
-        "label": "Password",
-        "placeholder": "••••••••",
-        "forgot": "Forgot password?"
-      }
-    },
-    "loading": "Logging in...",
-    "submit": "Log in"
-  },
-  "registerPage": {
-    "title": "Create account",
-    "subtitle": "Create a free account and start your adventure with us.",
-    "progress": {
-      "infos": "Information",
-      "verif": "Verification"
-    },
-    "backToLogin": "Back to login"
-  },
-  "registerStepOne": {
-    "fields": {
-      "firstName": {
-        "label": "First Name",
-        "placeholder": "Your first name"
-      },
-      "lastName": {
-        "label": "Last Name",
-        "placeholder": "Your last name"
-      },
-      "username": {
-        "label": "Username",
-        "placeholder": "Choose a username",
-        "note": "Username must be at least 3 characters"
-      },
-      "email": {
-        "label": "Email Address",
-        "placeholder": "your.email@example.com"
-      },
-      "password": {
-        "label": "Password",
-        "placeholder": "••••••••"
-      },
-      "repeatPassword": {
-        "label": "Confirm Password",
-        "placeholder": "••••••••"
-      }
-    },
-    "next": "Next"
-  },
-  "resetPassword": {
-    "title": "Forgot password",
-    "subtitle": "Reset your password in a few simple steps",
-    "progress": {
-      "email": "Email",
-      "verification": "Verification",
-      "final": "Finalization"
-    },
-    "fields": {
-      "email": {
-        "label": "Email address",
-        "placeholder": "your.email@example.com"
-      },
-      "code": {
-        "label": "Verification code",
-        "placeholder": "Enter the code received by email"
-      },
-      "newPassword": {
-        "label": "New password",
-        "placeholder": "••••••••"
-      }
-    },
-    "verify": "Verify",
-    "confirm": "Confirm",
-    "changePassword": "Change password",
-    "back": "Back",
-    "success": "Your password has been successfully updated!",
-    "goToLogin": "Go to login page",
-    "backToLogin": "Back to login",
-    "error": {
-      "codeServer": "An error occurred while verifying the code on the server.",
-      "codeUnknown": "An unknown error occurred while verifying the code.",
-      "emailInvalid": "Your email is invalid. Please enter a valid email address.",
-      "emailFormat": "Your input is not a valid email address.",
-      "emailServer": "An error occurred while verifying the email on the server.",
-      "emailUnknown": "An unknown error occurred while verifying the email.",
-      "passwordServer": "An error occurred while changing the password on the server.",
-      "passwordUnknown": "An unknown error occurred while changing the password."
-    }
-  },
   "controllerBar": {
     "bookNotFound": "No book found",
     "errorGettingBook": "Error while trying to get the book information",
@@ -137,6 +22,10 @@
     "unknownBookError": "Unknown error while retrieving book",
     "unknownChapterError": "Unknown error while retrieving chapter"
   },
+  "userMenu": {
+    "settings": "Settings",
+    "logout": "Logout"
+  },
   "bookList": {
     "library": "Library",
     "booksAreMirrors": "\"Books are the mirrors of the soul\"",
@@ -161,18 +50,7 @@
   "bookCard": {
     "noCoverAlt": "No cover",
     "initialsSeparator": ".",
-    "subtitlePlaceholder": "No subtitle",
-    "synced": "Synced",
-    "localOnly": "Local only",
-    "serverOnly": "Server only",
-    "toSyncFromServer": "Download from server",
-    "toSyncToServer": "Upload to server",
-    "sync": "Sync",
-    "uploadError": "Error uploading book.",
-    "downloadError": "Error downloading book.",
-    "syncFromServerError": "Error syncing from server.",
-    "syncToServerError": "Error syncing to server.",
-    "refreshError": "Error refreshing books."
+    "subtitlePlaceholder": "No subtitle"
   },
   "scribeTopBar": {
     "logoAlt": "Logo",
@@ -210,11 +88,41 @@
       },
       "importBook": {
         "title": "Import a book",
-        "description": "Import a book from a DOCX file.",
-        "badge": "IMPORT"
+        "description": "Import a DOCX file to create a book.",
+        "badge": "DOCX"
       }
     }
   },
+  "importBook": {
+    "header": "Import a book",
+    "pickFile": "Select a DOCX file",
+    "parsing": "Parsing file...",
+    "fields": {
+      "type": "Book type",
+      "title": "Title",
+      "subTitle": "Subtitle",
+      "summary": "Summary",
+      "version": "Chapter version"
+    },
+    "chapters": {
+      "title": "Chapters",
+      "detected": "{count} chapter(s) detected",
+      "selectAll": "Select all",
+      "deselectAll": "Deselect all",
+      "words": "words"
+    },
+    "submit": "Import",
+    "importing": "Importing...",
+    "success": "Book imported successfully.",
+    "error": {
+      "invalidFormat": "Invalid file format. Please select a DOCX file.",
+      "parseFailed": "Failed to parse the file.",
+      "titleRequired": "Title is required.",
+      "typeRequired": "Book type is required.",
+      "noChaptersSelected": "Please select at least one chapter.",
+      "importFailed": "An error occurred while importing the book."
+    }
+  },
   "scribeChapterComponent": {
     "sheetHeading": "Sheet",
     "createSheet": "Create your sheet",
@@ -255,7 +163,7 @@
       },
       "spells": {
         "title": "Spell Book",
-        "description": "Create and manage spells, magic systems, and supernatural abilities.",
+        "description": "Manage the spells and magic of your universe.",
         "badge": "SPELL"
       },
       "items": {
@@ -303,7 +211,12 @@
     "exampleHeading": "Example",
     "literaryUsageHeading": "Literary usage",
     "description": "Search for a word to get its definition, usage examples, and literary tips.",
-    "errorUnknown": "An unknown error occurred while searching for the word."
+    "errorUnknown": "An unknown error occurred while searching for the word.",
+    "errorNoResponse": "No response received from the server.",
+    "locked": {
+      "title": "Access required",
+      "description": "A QuillSense basic subscription or an API key is required to enable the smart dictionary."
+    }
   },
   "synonyms": {
     "heading": "Lexical search",
@@ -319,7 +232,12 @@
     "emptyAntonymsTitle": "Antonym Search",
     "emptySynonymsDescription": "Enter a word to find synonyms suitable for different writing contexts.",
     "emptyAntonymsDescription": "Enter a word to find antonyms suitable for different writing contexts.",
-    "errorUnknown": "An unknown error occurred while searching for the word."
+    "errorUnknown": "An unknown error occurred while searching for the word.",
+    "errorNoResponse": "No response received from the server.",
+    "locked": {
+      "title": "Access required",
+      "description": "A QuillSense basic subscription or an API key is required to enable synonym search."
+    }
   },
   "inspireMe": {
     "fieldName": "Find inspiration",
@@ -332,7 +250,17 @@
     "emptyHeading": "Inspire me",
     "emptyDescription": "Search for ideas to enrich your writing. Enter a prompt and let AI inspire you with creative suggestions based on your current content.",
     "emptyPromptError": "Please enter a prompt to get inspired.",
-    "errorUnknown": "An unknown error occurred while trying to fetch inspiration."
+    "error": {
+      "contentRetrieval": "Error retrieving content.",
+      "contentRetrievalUnknown": "Unknown error retrieving content.",
+      "noBook": "No book selected.",
+      "noChapter": "No chapter selected.",
+      "unknown": "An unknown error occurred during generation."
+    },
+    "locked": {
+      "title": "Access required",
+      "description": "A QuillSense basic subscription or an API key is required to enable the Inspire Me mode."
+    }
   },
   "conjugator": {
     "locked": {
@@ -467,82 +395,17 @@
     "errorCategoryRequired": "Character role is required.",
     "successAdd": "Character added successfully.",
     "successUpdate": "Character updated successfully.",
+    "successDelete": "Character deleted successfully.",
     "errorAddCharacter": "Error adding character.",
     "errorUpdateCharacter": "Error updating character.",
+    "errorDeleteCharacter": "Error deleting character.",
     "errorAddAttribute": "Error adding attribute.",
     "errorRemoveAttribute": "Error removing attribute.",
-    "errorDeleteCharacter": "Error deleting character.",
-    "successDelete": "Character deleted successfully.",
     "enableTool": "Enable characters",
     "enableToolDescription": "Enable character management for this book.",
     "toolEnabled": "Character management enabled.",
     "toolDisabled": "Character management disabled."
   },
-  "characterDetail": {
-    "back": "Back",
-    "newCharacter": "New character",
-    "exportToSeries": "Export to series",
-    "deleteTitle": "Delete character",
-    "deleteMessage": "You are about to permanently delete the character \"{name}\".",
-    "basicInfo": "Basic information",
-    "name": "Name",
-    "namePlaceholder": "Enter a name",
-    "lastName": "Last name",
-    "lastNamePlaceholder": "Example: Smith",
-    "nickname": "Nickname",
-    "nicknamePlaceholder": "Alias or nickname",
-    "role": "Role",
-    "title": "Title",
-    "titlePlaceholder": "Ex: King, Captain, Doctor...",
-    "gender": "Gender",
-    "genderPlaceholder": "Ex: Male, Female, Non-binary",
-    "age": "Age",
-    "agePlaceholder": "Ex: 25",
-    "yearsOld": "years old",
-    "species": "Species",
-    "speciesPlaceholder": "Ex: Human, Elf, Vampire",
-    "nationality": "Nationality/Origin",
-    "nationalityPlaceholder": "Ex: French, Elven",
-    "status": "Status",
-    "residence": "Place of residence",
-    "residencePlaceholder": "Where the character lives",
-    "speechPattern": "Speech pattern",
-    "speechPatternPlaceholder": "Verbal tics, accent, vocabulary...",
-    "catchphrase": "Catchphrase",
-    "catchphrasePlaceholder": "Character's recurring quote",
-    "notes": "Author notes",
-    "notesPlaceholder": "Personal notes, reminders...",
-    "colorLabel": "Associated color",
-    "colorPlaceholder": "Ex: #51AE84 or green",
-    "advancedMode": "Advanced mode",
-    "showAdvanced": "Show",
-    "hideAdvanced": "Hide",
-    "identitySection": "Extended identity",
-    "voiceSection": "Character voice",
-    "authorSection": "Author notes",
-    "historySection": "Background",
-    "biography": "Biography",
-    "biographyPlaceholder": "Character biography.",
-    "history": "History",
-    "historyPlaceholder": "Character history...",
-    "roleFull": "Role",
-    "roleFullPlaceholder": "Role of the character in the story",
-    "fetchAttributesError": "Error fetching attributes."
-  },
-  "characterList": {
-    "search": "Search for a character...",
-    "add": "Add a character",
-    "unknownImage": "?",
-    "unknown": "Unknown",
-    "noLastName": "No last name",
-    "noTitle": "No title",
-    "noRole": "No role",
-    "noCharacters": "No characters",
-    "noCharactersDescription": "Add your first character to get started."
-  },
-  "characterSectionElement": {
-    "newItem": "New {item}"
-  },
   "spellComponent": {
     "exportSuccess": "Spell exported to series successfully.",
     "enableTool": "Enable spell book",
@@ -613,16 +476,77 @@
   },
   "spellPowerLevels": {
     "none": "None",
-    "cantrip": "Cantrip",
-    "novice": "Novice",
-    "apprentice": "Apprentice",
-    "journeyman": "Journeyman",
-    "expert": "Expert",
-    "master": "Master",
-    "grandmaster": "Grandmaster",
+    "minor": "Minor",
+    "moderate": "Moderate",
+    "major": "Major",
     "legendary": "Legendary",
     "divine": "Divine"
   },
+  "characterDetail": {
+    "back": "Back",
+    "newCharacter": "New character",
+    "exportToSeries": "Export to series",
+    "deleteTitle": "Delete character",
+    "deleteMessage": "You are about to permanently delete the character \"{name}\".",
+    "basicInfo": "Basic information",
+    "name": "Name",
+    "namePlaceholder": "Enter a name",
+    "lastName": "Last name",
+    "lastNamePlaceholder": "Example: Smith",
+    "nickname": "Nickname",
+    "nicknamePlaceholder": "Alias or nickname",
+    "role": "Role",
+    "title": "Title",
+    "titlePlaceholder": "Ex: King, Captain, Doctor...",
+    "gender": "Gender",
+    "genderPlaceholder": "Ex: Male, Female, Non-binary",
+    "age": "Age",
+    "agePlaceholder": "Ex: 25",
+    "yearsOld": "years old",
+    "species": "Species",
+    "speciesPlaceholder": "Ex: Human, Elf, Vampire",
+    "nationality": "Nationality/Origin",
+    "nationalityPlaceholder": "Ex: French, Elven",
+    "status": "Status",
+    "residence": "Place of residence",
+    "residencePlaceholder": "Where the character lives",
+    "speechPattern": "Speech pattern",
+    "speechPatternPlaceholder": "Verbal tics, accent, vocabulary...",
+    "catchphrase": "Catchphrase",
+    "catchphrasePlaceholder": "Character's recurring quote",
+    "notes": "Author notes",
+    "notesPlaceholder": "Personal notes, reminders...",
+    "colorLabel": "Associated color",
+    "colorPlaceholder": "Ex: #51AE84 or green",
+    "advancedMode": "Advanced mode",
+    "showAdvanced": "Show",
+    "hideAdvanced": "Hide",
+    "identitySection": "Extended identity",
+    "voiceSection": "Character voice",
+    "authorSection": "Author notes",
+    "historySection": "Background",
+    "biography": "Biography",
+    "biographyPlaceholder": "Character biography.",
+    "history": "History",
+    "historyPlaceholder": "Character history...",
+    "roleFull": "Role",
+    "roleFullPlaceholder": "Role of the character in the story",
+    "fetchAttributesError": "Error fetching attributes."
+  },
+  "characterList": {
+    "search": "Search for a character...",
+    "add": "Add a character",
+    "unknownImage": "?",
+    "unknown": "Unknown",
+    "noLastName": "No last name",
+    "noTitle": "No title",
+    "noRole": "No role",
+    "noCharacters": "No characters",
+    "noCharactersDescription": "Add your first character to get started."
+  },
+  "characterSectionElement": {
+    "newItem": "New {item}"
+  },
   "aboutEditors": {
     "title": "About Scribe",
     "version": "Version",
@@ -642,29 +566,13 @@
     "yourLocations": "Your locations",
     "characters": "Characters",
     "spells": "Spell Book",
+    "quillsense": "QuillSense Settings",
+    "export": "Export your book",
     "objectsList": "Objects list",
     "bookGoals": "Book goals",
-    "quillsense": "QuillSense Settings",
-    "export": "Export Book",
     "save": "Save",
-    "notAvailable": "Option not available"
-  },
-  "exportOption": {
-    "title": "Export Your Book",
-    "description": "Choose the format and chapters to export.",
-    "format": "Format",
-    "selectFormat": "Select a format",
-    "chapters": "Chapters",
-    "selectAll": "Select all",
-    "deselectAll": "Deselect all",
-    "version": "Version",
-    "export": "Export",
-    "exporting": "Exporting...",
-    "noChapters": "No chapters available for export.",
-    "success": "Book exported successfully!",
-    "cancelled": "Export cancelled.",
-    "error": "Error exporting the book.",
-    "loadingChapters": "Loading chapters..."
+    "notAvailable": "Option not available",
+    "unknownError": "An unknown error occurred."
   },
   "noBookHome": {
     "title": "Your work is waiting for its first words",
@@ -675,14 +583,7 @@
     "preferences": "Preferences",
     "ghostWriter": "Ghost Writer",
     "draftCompanion": "Draft Companion",
-    "save": "Save",
-    "saving": "Saving...",
-    "close": "Close",
-    "toolbar": {
-      "1": "1",
-      "2": "2",
-      "3": "3"
-    }
+    "save": "Save"
   },
   "draftCompanion": {
     "noPreviousVersion": "No previous version of this chapter",
@@ -696,13 +597,13 @@
     "words": "Words",
     "refine": "Refine",
     "refining": "Refining...",
-    "abortSuccess": "Generation stopped. Token and cost totals will be available on next page refresh."
+    "abortSuccess": "Generation stopped. Token and cost totals will be available on next page refresh.",
+    "sseParsingError": "Error reading generation data"
   },
   "ghostWriter": {
     "title": "Ghost Writer",
     "description": "Turn your ideas into captivating prose",
-    "subscriptionRequired": "You must be subscribed to Quill Sense to use Ghost Writer.",
-    "quillsenseDisabled": "QuillSense is disabled for this book. You can enable it in the book settings.",
+    "subscriptionRequired": "You must be subscribed to QuillSense Pro to use Ghost Writer.",
     "subscribe": "Subscribe",
     "length": "Text length",
     "minimum": "Minimum",
@@ -719,6 +620,7 @@
     "cancel": "Cancel",
     "generate": "Generate",
     "generating": "Generating...",
+    "stop": "Stop",
     "successGenerate": "Text generated successfully.",
     "successInsert": "Excerpt successfully inserted",
     "successImport": "Content imported successfully",
@@ -740,6 +642,7 @@
       "unknownError": "Unknown error saving settings."
     },
     "tags": {
+      "addTagPlaceholder": "Tags",
       "unknownError": "Unknown error managing tags."
     }
   },
@@ -776,12 +679,16 @@
       "sépia": "Sepia"
     },
     "focusMode": "Focus mode (hide distractions)",
-    "reset": "Reset preferences"
+    "reset": "Reset preferences",
+    "saveError": "Error saving preferences.",
+    "unknownError": "An unknown error occurred while saving preferences."
   },
   "scribeFooterBar": {
     "sheet": "Sheet : ",
     "madeWith": "Scribe Editor made with",
-    "words": "Words",
+    "words": "words",
+    "pages": "pages",
+    "paragraphs": "paragraphs",
     "books": "Books"
   },
   "addNewBookForm": {
@@ -1082,17 +989,7 @@
     "book": "book",
     "books": "books",
     "series": "Series",
-    "settings": "Series settings",
-    "synced": "Synced",
-    "localOnly": "Local only",
-    "serverOnly": "Server only",
-    "toSyncFromServer": "Download from server",
-    "toSyncToServer": "Upload to server",
-    "uploadError": "Error uploading series.",
-    "downloadError": "Error downloading series.",
-    "syncFromServerError": "Error syncing from server.",
-    "syncToServerError": "Error syncing to server.",
-    "refreshError": "Error refreshing series."
+    "settings": "Series settings"
   },
   "basicInformationSetting": {
     "error": {
@@ -1120,6 +1017,12 @@
       "generateWithQuillSense": "Generate with QuillSense"
     }
   },
+  "quillList": {
+    "untitled": "Untitled",
+    "error": {
+      "unknown": "An unknown error occurred while loading conversations."
+    }
+  },
   "quillConversation": {
     "emptyMessageError": "Please enter a message before sending it.",
     "inputPlaceholder": "What's on your mind?",
@@ -1160,23 +1063,25 @@
     "edit": "Edit",
     "exportToSeries": "Export to series",
     "save": "Save",
-    "unknownError": "An unknown error occurred",
-    "loading": "Loading..."
+    "unknownError": "An unknown error occurred"
   },
-  "syncField": {
-    "uploadSuccess": "{count} element(s) updated successfully.",
-    "uploadTooltip": "Push to series",
-    "downloadTooltip": "Pull from series"
-  },
-  "seriesImport": {
-    "importButton": "Import",
-    "importFromSeries": "Import from series",
-    "selectElement": "Select an element"
+  "spellPowerLevels": {
+    "none": "None",
+    "cantrip": "Cantrip",
+    "novice": "Novice",
+    "apprentice": "Apprentice",
+    "journeyman": "Journeyman",
+    "expert": "Expert",
+    "master": "Master",
+    "grandmaster": "Grandmaster",
+    "legendary": "Legendary",
+    "divine": "Divine"
   },
   "editor": {
     "error": {
       "savedFailed": "Save failed",
-      "unknownError": "An unknown error occurred"
+      "unknownError": "An unknown error occurred",
+      "parsingContent": "Error loading chapter content"
     },
     "success": {
       "saved": "Saved successfully"
@@ -1217,18 +1122,22 @@
       "userNotFound": "User not found",
       "authenticationError": "Error during authentication",
       "termsAcceptError": "Error accepting terms of service",
-      "lastChapterError": "Error retrieving last chapter",
-      "localDataError": "Unable to load local data",
-      "encryptionKeyError": "Encryption key not found",
-      "offlineModeError": "Error initializing offline mode",
-      "offlineInitError": "Error initializing offline mode",
-      "syncError": "Error syncing data",
-      "dbInitError": "Error initializing local database",
-      "offlineError": "Error checking offline mode",
-      "fetchBooksError": "Error fetching books",
-      "fetchSeriesError": "Error fetching series"
+      "lastChapterError": "Error retrieving last chapter"
     }
   },
+  "quillsenseSetting": {
+    "enableQuillsense": "Enable QuillSense",
+    "enableDescription": "When disabled, all AI features will be hidden for this book.",
+    "advancedPrompt": "Advanced prompt for Ghost Writer",
+    "advancedPromptPlaceholder": "Enter custom instructions to guide the AI when generating text...",
+    "advancedPromptDescription": "This prompt will be used as a priority directive when generating text with Ghost Writer.",
+    "saveSuccess": "QuillSense settings saved successfully.",
+    "saveError": "Error saving settings.",
+    "unknownError": "An unknown error occurred.",
+    "enable_characters": "Enable characters",
+    "enable_worlds": "Enable worlds",
+    "enable_locations": "Enable locations"
+  },
   "shortStoryGenerator": {
     "title": "Short Story Generator",
     "tabs": {
@@ -1285,123 +1194,221 @@
       "close": "Close"
     }
   },
-  "userMenu": {
-    "settings": "Settings",
-    "logout": "Logout"
+  "syncField": {
+    "uploadSuccess": "{count} element(s) updated successfully.",
+    "uploadTooltip": "Push to series",
+    "downloadTooltip": "Pull from series"
+  },
+  "exportOption": {
+    "formatLabel": "Export format",
+    "chapters": "Chapters",
+    "loadingChapters": "Loading chapters...",
+    "noChaptersAvailable": "No chapters available for export.",
+    "selectAll": "Select all",
+    "deselectAll": "Deselect all",
+    "exportButton": "Export",
+    "exporting": "Exporting...",
+    "noBookSelected": "No book selected.",
+    "noChaptersSelected": "Please select at least one chapter.",
+    "downloadSuccess": "Your {format} file has been downloaded successfully.",
+    "downloadError": "Download failed.",
+    "serverError": "Server error during export.",
+    "unknownError": "An unknown error occurred."
+  },
+  "seriesImport": {
+    "importButton": "Import",
+    "importFromSeries": "Import from series",
+    "selectElement": "Select an element"
+  },
+  "loginPage": {
+    "title": "Login",
+    "welcome": "Welcome to ERitors Scribe",
+    "orSocial": "or sign in with",
+    "offlineWarning": {
+      "title": "Offline mode required",
+      "message": "You are not connected to the Internet. To use the app offline, you must first sign in at least once online."
+    }
+  },
+  "loginForm": {
+    "submit": "Sign in",
+    "fields": {
+      "email": {
+        "label": "Email address",
+        "placeholder": "Enter your email address"
+      },
+      "password": {
+        "label": "Password",
+        "placeholder": "Enter your password",
+        "forgot": "Forgot password?"
+      }
+    },
+    "error": {
+      "emailRequired": "Please enter your email address.",
+      "passwordRequired": "Please enter your password.",
+      "emailLength": "Email address must be between 5 and 100 characters.",
+      "emailInvalidChars": "Email address contains invalid characters.",
+      "connection": "Connection error. Check your credentials.",
+      "server": "Server error. Please try again later.",
+      "unknown": "An unknown error occurred."
+    }
+  },
+  "socialForm": {
+    "error": {
+      "connection": "Connection error with the provider."
+    }
+  },
+  "registerPage": {
+    "title": "Register",
+    "subtitle": "Create your ERitors account",
+    "backToLogin": "Back to login",
+    "progress": {
+      "infos": "Information",
+      "verif": "Verification"
+    }
+  },
+  "registerStepOne": {
+    "next": "Continue",
+    "fields": {
+      "firstName": {
+        "label": "First name",
+        "placeholder": "Enter your first name"
+      },
+      "lastName": {
+        "label": "Last name",
+        "placeholder": "Enter your last name"
+      },
+      "username": {
+        "label": "Username",
+        "placeholder": "Choose a username",
+        "note": "Username must be between 3 and 50 characters."
+      },
+      "email": {
+        "label": "Email address",
+        "placeholder": "Enter your email address"
+      },
+      "password": {
+        "label": "Password",
+        "placeholder": "Choose a password"
+      },
+      "repeatPassword": {
+        "label": "Confirm password",
+        "placeholder": "Confirm your password"
+      }
+    },
+    "error": {
+      "requiredFields": "All fields are required.",
+      "firstNameLength": "First name must be between 2 and 50 characters.",
+      "lastNameLength": "Last name must be between 2 and 50 characters.",
+      "usernameLength": "Username must be between 3 and 50 characters.",
+      "invalidInput": "One or more fields contain invalid characters.",
+      "passwordMismatch": "Passwords do not match.",
+      "preRegister": "Error during pre-registration.",
+      "unknown": "An unknown error occurred."
+    },
+    "success": {
+      "preRegister": "A verification code has been sent to your email address."
+    }
+  },
+  "registerStepTwo": {
+    "verify": "Verify",
+    "back": "Back",
+    "confirmed": "Your account has been verified successfully!",
+    "start": "Get started",
+    "instructions": {
+      "sent": "A verification code has been sent to your email address.",
+      "checkInbox": "Check your inbox and spam folder."
+    },
+    "fields": {
+      "code": {
+        "label": "Verification code",
+        "placeholder": "Enter the code received by email"
+      }
+    },
+    "error": {
+      "codeIncorrect": "The verification code is incorrect.",
+      "unknown": "An unknown error occurred."
+    },
+    "success": {
+      "verified": "Your account has been verified successfully!"
+    }
+  },
+  "resetPassword": {
+    "title": "Reset Password",
+    "subtitle": "Reset your password",
+    "verify": "Verify email",
+    "confirm": "Confirm code",
+    "changePassword": "Change password",
+    "back": "Back",
+    "backToLogin": "Back to login",
+    "success": "Your password has been reset successfully!",
+    "goToLogin": "Sign in",
+    "progress": {
+      "email": "Email",
+      "verification": "Verification",
+      "final": "New password"
+    },
+    "fields": {
+      "email": {
+        "label": "Email address",
+        "placeholder": "Enter your email address"
+      },
+      "code": {
+        "label": "Verification code",
+        "placeholder": "Enter the code received"
+      },
+      "newPassword": {
+        "label": "New password",
+        "placeholder": "Enter your new password"
+      }
+    },
+    "error": {
+      "emailInvalid": "Please enter a valid email address.",
+      "emailFormat": "The email address format is invalid.",
+      "emailServer": "Server error while verifying email.",
+      "emailUnknown": "An unknown error occurred.",
+      "codeServer": "Server error while verifying code.",
+      "codeUnknown": "An unknown error occurred.",
+      "passwordServer": "Server error while changing password.",
+      "passwordUnknown": "An unknown error occurred."
+    }
   },
   "offline": {
     "mode": {
-      "title": "Offline Mode",
-      "backToOnline": "Back to online login"
+      "title": "Offline mode",
+      "backToOnline": "Back online"
     },
     "pin": {
+      "errors": {
+        "tooShort": "PIN must be at least 4 digits.",
+        "tooLong": "PIN cannot exceed 8 digits.",
+        "digitsOnly": "PIN must contain only digits.",
+        "mismatch": "PINs do not match.",
+        "setupFailed": "Error while setting up PIN."
+      },
       "setup": {
-        "title": "Configure PIN",
-        "titleFirstLogin": "Secure your offline access",
-        "subtitle": "Protect your local data",
-        "description": "This PIN will allow you to access your works even without an internet connection",
-        "pinLabel": "PIN Code (4-8 digits)",
-        "confirmPinLabel": "Confirm PIN",
+        "title": "Set up offline PIN",
+        "titleFirstLogin": "Set up a PIN for offline mode",
+        "subtitle": "This PIN will allow you to access your data without an Internet connection.",
+        "description": "Choose a 4 to 8 digit PIN to secure offline access to your data.",
+        "pinLabel": "PIN code",
+        "confirmPinLabel": "Confirm PIN code",
         "laterButton": "Later",
-        "configureButton": "Configure PIN",
-        "configuringButton": "Configuring...",
-        "footer": "Your PIN is stored securely on your device"
+        "configuringButton": "Setting up...",
+        "configureButton": "Set up PIN",
+        "footer": "You can change this PIN in settings."
       },
       "verify": {
-        "title": "Offline Mode",
-        "subtitle": "Enter your PIN to access your local works",
-        "placeholder": "Enter your PIN",
-        "enterPin": "Please enter your PIN",
-        "incorrect": "Incorrect PIN",
-        "tooManyAttempts": "Too many failed attempts. Please reconnect online.",
-        "error": "Error verifying PIN",
+        "title": "PIN Verification",
+        "subtitle": "Enter your PIN to access your offline data.",
+        "placeholder": "PIN code",
+        "enterPin": "Please enter your PIN.",
+        "incorrect": "Incorrect PIN.",
+        "tooManyAttempts": "Too many attempts. Please sign in online.",
+        "error": "Error while verifying PIN.",
         "cancelButton": "Cancel",
-        "unlockButton": "Unlock",
         "verifyingButton": "Verifying...",
-        "attemptsRemaining": "{{count}} attempt(s) remaining"
-      },
-      "errors": {
-        "tooShort": "PIN must be at least 4 digits",
-        "tooLong": "PIN cannot exceed 8 digits",
-        "digitsOnly": "PIN must contain only digits",
-        "mismatch": "PINs do not match",
-        "setupFailed": "Error configuring PIN"
+        "unlockButton": "Unlock"
       }
     }
-  },
-  "deleteBook": {
-    "title": "Delete book",
-    "message": "You are about to permanently delete your book.",
-    "confirm": "Delete",
-    "cancel": "Cancel",
-    "deleteLocalToo": "Also delete local version",
-    "deleteLocalWarning": "Warning: This action will delete the book from the server AND your device. This action is irreversible.",
-    "errorUnknown": "An unknown error occurred while deleting the book."
-  },
-  "quillSenseSetting": {
-    "title": "QuillSense Settings",
-    "description": "Manage AI features for this book.",
-    "enableSection": "Enable/Disable QuillSense",
-    "enableLabel": "QuillSense enabled",
-    "enableDescription": "When enabled, AI features like Ghost Writer and QuillSense will be available for this book.",
-    "advancedSection": "Advanced Settings",
-    "advancedPromptLabel": "Advanced Prompt",
-    "advancedPromptPlaceholder": "Enter custom instructions for the AI...",
-    "advancedPromptHint": "These instructions will be included in every text generation for this book.",
-    "disabledWarning": "QuillSense is disabled. AI features will not be available for this book.",
-    "errorFetch": "Error fetching QuillSense settings.",
-    "errorSave": "Error saving settings.",
-    "errorUnknown": "An unknown error occurred.",
-    "successSave": "QuillSense settings saved successfully.",
-    "noBookSelected": "No book selected.",
-    "enable_characters": "Enable character management for this book",
-    "enable_worlds": "Enable world management for this book",
-    "enable_locations": "Enable location management for this book"
-  },
-  "importBook": {
-    "header": {
-      "title": "Import a Book"
-    },
-    "pickFile": "Choose a DOCX file",
-    "parsing": "Analyzing file...",
-    "chaptersDetected": "{count} chapters detected",
-    "noChaptersDetected": "No chapters detected in the file",
-    "fields": {
-      "title": {
-        "label": "Book Title",
-        "placeholder": "Enter the title"
-      },
-      "subTitle": {
-        "label": "Subtitle",
-        "placeholder": "Enter the subtitle"
-      },
-      "summary": {
-        "label": "Summary",
-        "placeholder": "Enter a summary"
-      },
-      "type": {
-        "label": "Book Type"
-      },
-      "version": {
-        "label": "Chapter Version"
-      }
-    },
-    "chapters": {
-      "title": "Chapters to import",
-      "words": "{count} words",
-      "selectAll": "Select all",
-      "deselectAll": "Deselect all"
-    },
-    "submit": "Import",
-    "importing": "Importing...",
-    "success": "Book imported successfully",
-    "error": {
-      "titleRequired": "Book title is required",
-      "typeRequired": "Book type is required",
-      "noChaptersSelected": "Select at least one chapter",
-      "parseFailed": "Error analyzing the file",
-      "importFailed": "Error during import",
-      "invalidFormat": "Invalid format. Only DOCX files are accepted"
-    }
   }
 }
\ No newline at end of file
diff --git a/lib/locales/fr.json b/lib/locales/fr.json
index 216dfc0..1d97124 100644
--- a/lib/locales/fr.json
+++ b/lib/locales/fr.json
@@ -13,121 +13,6 @@
     "activate": "Activer",
     "cancel": "Annuler"
   },
-  "loginPage": {
-    "title": "Connexion",
-    "welcome": "Bienvenue sur ERitors",
-    "orSocial": "ou continuez avec",
-    "noAccount": "Pas encore de compte?",
-    "createAccount": "Créez-en un ici",
-    "backToLogin": "Retour à la connexion",
-    "offlineWarning": {
-      "title": "Première synchronisation requise",
-      "message": "Une connexion Internet est nécessaire pour votre première connexion afin de synchroniser vos données."
-    }
-  },
-  "loginForm": {
-    "error": {
-      "emailRequired": "Votre courriel doit être rempli.",
-      "passwordRequired": "Votre mot de passe doit être rempli.",
-      "emailLength": "Votre courriel doit avoir au moins 3 caractères.",
-      "emailInvalidChars": "Votre courriel contient des caractères non valides.",
-      "connection": "Une erreur est survenue lors de la connexion.",
-      "server": "Une erreur serveur est survenue lors de la connexion.",
-      "unknown": "Une erreur inconnue est survenue lors de la connexion."
-    },
-    "fields": {
-      "email": {
-        "label": "Adresse courriel",
-        "placeholder": "votre.courriel@exemple.com"
-      },
-      "password": {
-        "label": "Mot de passe",
-        "placeholder": "••••••••",
-        "forgot": "Mot de passe oublié?"
-      }
-    },
-    "loading": "Connexion en cours...",
-    "submit": "Se connecter"
-  },
-  "registerPage": {
-    "title": "Créer un compte",
-    "subtitle": "Créez un compte gratuitement et commencez votre aventure avec nous.",
-    "progress": {
-      "infos": "Informations",
-      "verif": "Vérification"
-    },
-    "backToLogin": "Retour à la connexion"
-  },
-  "registerStepOne": {
-    "fields": {
-      "firstName": {
-        "label": "Prénom",
-        "placeholder": "Votre prénom"
-      },
-      "lastName": {
-        "label": "Nom",
-        "placeholder": "Votre nom"
-      },
-      "username": {
-        "label": "Nom d'utilisateur",
-        "placeholder": "Choisissez un nom d'utilisateur",
-        "note": "Le nom d'utilisateur doit contenir au moins 3 caractères"
-      },
-      "email": {
-        "label": "Adresse courriel",
-        "placeholder": "votre.courriel@exemple.com"
-      },
-      "password": {
-        "label": "Mot de passe",
-        "placeholder": "••••••••"
-      },
-      "repeatPassword": {
-        "label": "Confirmer le mot de passe",
-        "placeholder": "••••••••"
-      }
-    },
-    "next": "Suivant"
-  },
-  "resetPassword": {
-    "title": "Mot de passe oublié",
-    "subtitle": "Réinitialisez votre mot de passe en quelques étapes simples",
-    "progress": {
-      "email": "Courriel",
-      "verification": "Vérification",
-      "final": "Finalisation"
-    },
-    "fields": {
-      "email": {
-        "label": "Adresse courriel",
-        "placeholder": "votre.courriel@exemple.com"
-      },
-      "code": {
-        "label": "Code de vérification",
-        "placeholder": "Entrez le code reçu par courriel"
-      },
-      "newPassword": {
-        "label": "Nouveau mot de passe",
-        "placeholder": "••••••••"
-      }
-    },
-    "verify": "Vérifier",
-    "confirm": "Confirmer",
-    "changePassword": "Changer mot de passe",
-    "back": "Retour",
-    "success": "Votre mot de passe a été mis à jour avec succès!",
-    "goToLogin": "Aller à la page de connexion",
-    "backToLogin": "Retour à la connexion",
-    "error": {
-      "codeServer": "Une erreur s'est produite lors de la vérification du code sur le serveur.",
-      "codeUnknown": "Une erreur inconnue s'est produite lors de la vérification du code.",
-      "emailInvalid": "Votre courriel est invalide. Veuillez entrer une adresse courriel valide.",
-      "emailFormat": "Votre saisie n'est pas une adresse courriel valide.",
-      "emailServer": "Une erreur s'est produite lors de la vérification du courriel sur le serveur.",
-      "emailUnknown": "Une erreur inconnue s'est produite lors de la vérification du courriel.",
-      "passwordServer": "Une erreur s'est produite lors de la modification du mot de passe sur le serveur.",
-      "passwordUnknown": "Une erreur inconnue s'est produite lors de la modification du mot de passe."
-    }
-  },
   "controllerBar": {
     "bookNotFound": "Aucun livre trouvé",
     "errorGettingBook": "Erreur lors de la récupération des informations du livre",
@@ -137,6 +22,10 @@
     "unknownBookError": "Erreur inconnue lors de la récupération du livre",
     "unknownChapterError": "Erreur inconnue lors de la récupération du chapitre"
   },
+  "userMenu": {
+    "settings": "Paramètres",
+    "logout": "Déconnexion"
+  },
   "bookList": {
     "library": "Bibliothèque",
     "booksAreMirrors": "« Les livres sont les miroirs de l'âme »",
@@ -161,18 +50,7 @@
   "bookCard": {
     "noCoverAlt": "Pas de couverture",
     "initialsSeparator": ".",
-    "subtitlePlaceholder": "Aucun sous-titre",
-    "synced": "Synchronisé",
-    "localOnly": "Local uniquement",
-    "serverOnly": "Sur le serveur uniquement",
-    "toSyncFromServer": "Télécharger depuis le serveur",
-    "toSyncToServer": "Envoyer vers le serveur",
-    "sync": "Synchroniser",
-    "uploadError": "Erreur lors du téléversement du livre.",
-    "downloadError": "Erreur lors du téléchargement du livre.",
-    "syncFromServerError": "Erreur lors de la synchronisation depuis le serveur.",
-    "syncToServerError": "Erreur lors de la synchronisation vers le serveur.",
-    "refreshError": "Erreur lors du rafraîchissement des livres."
+    "subtitlePlaceholder": "Aucun sous-titre"
   },
   "scribeTopBar": {
     "logoAlt": "Logo",
@@ -209,12 +87,42 @@
         "badge": "SÉRIE"
       },
       "importBook": {
-        "title": "Importer une oeuvre",
-        "description": "Importez un livre à partir d'un fichier DOCX.",
-        "badge": "IMPORT"
+        "title": "Importer un livre",
+        "description": "Importez un fichier DOCX pour créer un livre.",
+        "badge": "DOCX"
       }
     }
   },
+  "importBook": {
+    "header": "Importer un livre",
+    "pickFile": "Sélectionner un fichier DOCX",
+    "parsing": "Analyse du fichier en cours...",
+    "fields": {
+      "type": "Type de livre",
+      "title": "Titre",
+      "subTitle": "Sous-titre",
+      "summary": "Résumé",
+      "version": "Version des chapitres"
+    },
+    "chapters": {
+      "title": "Chapitres",
+      "detected": "{count} chapitre(s) détecté(s)",
+      "selectAll": "Tout sélectionner",
+      "deselectAll": "Tout désélectionner",
+      "words": "mots"
+    },
+    "submit": "Importer",
+    "importing": "Importation...",
+    "success": "Livre importé avec succès.",
+    "error": {
+      "invalidFormat": "Format de fichier invalide. Veuillez sélectionner un fichier DOCX.",
+      "parseFailed": "Échec de l'analyse du fichier.",
+      "titleRequired": "Le titre est requis.",
+      "typeRequired": "Le type de livre est requis.",
+      "noChaptersSelected": "Veuillez sélectionner au moins un chapitre.",
+      "importFailed": "Une erreur est survenue lors de l'importation du livre."
+    }
+  },
   "scribeChapterComponent": {
     "sheetHeading": "Feuille",
     "createSheet": "Créer ta feuille",
@@ -254,9 +162,9 @@
         "badge": "CHAR"
       },
       "spells": {
-        "title": "Livre des sortilèges",
-        "description": "Créez et gérez les sortilèges, systèmes de magie et capacités surnaturelles.",
-        "badge": "SPELL"
+        "title": "Grimoire",
+        "description": "Gérez les sorts et la magie de votre univers.",
+        "badge": "SORT"
       },
       "items": {
         "title": "Objets",
@@ -303,7 +211,12 @@
     "exampleHeading": "Exemple",
     "literaryUsageHeading": "Usage littéraire",
     "description": "Recherchez un mot pour obtenir sa définition, des exemples d'utilisation et des conseils littéraires.",
-    "errorUnknown": "Une erreur inconnue est survenue lors de la recherche du mot."
+    "errorUnknown": "Une erreur inconnue est survenue lors de la recherche du mot.",
+    "errorNoResponse": "Aucune réponse reçue du serveur.",
+    "locked": {
+      "title": "Accès requis",
+      "description": "Un abonnement de niveau de base de QuillSense ou une clé API est requis pour activer le dictionnaire intelligent."
+    }
   },
   "synonyms": {
     "heading": "Recherche lexicale",
@@ -319,7 +232,12 @@
     "emptyAntonymsTitle": "Recherche d'antonymes",
     "emptySynonymsDescription": "Entrez un mot pour trouver des synonymes adaptés à différents contextes d'écriture.",
     "emptyAntonymsDescription": "Entrez un mot pour trouver des antonymes adaptés à différents contextes d'écriture.",
-    "errorUnknown": "Une erreur inconnue est survenue lors de la recherche du mot."
+    "errorUnknown": "Une erreur inconnue est survenue lors de la recherche du mot.",
+    "errorNoResponse": "Aucune réponse reçue du serveur.",
+    "locked": {
+      "title": "Accès requis",
+      "description": "Un abonnement de niveau de base de QuillSense ou une clé API est requis pour activer la recherche de synonymes."
+    }
   },
   "inspireMe": {
     "fieldName": "Trouver l'inspiration",
@@ -332,7 +250,17 @@
     "emptyHeading": "Inspire-moi",
     "emptyDescription": "Recherchez des idées pour enrichir votre écriture. Entrez un prompt et laissez l'IA vous inspirer avec des suggestions créatives basées sur votre contenu actuel.",
     "emptyPromptError": "Veuillez entrer un prompt pour vous inspirer.",
-    "errorUnknown": "Une erreur inconnue est survenue lors de la tentative d'inspiration."
+    "error": {
+      "contentRetrieval": "Erreur lors de la récupération du contenu.",
+      "contentRetrievalUnknown": "Erreur inconnue lors de la récupération du contenu.",
+      "noBook": "Aucun livre sélectionné.",
+      "noChapter": "Aucun chapitre sélectionné.",
+      "unknown": "Une erreur inconnue est survenue lors de la génération."
+    },
+    "locked": {
+      "title": "Accès requis",
+      "description": "Un abonnement de niveau de base de QuillSense ou une clé API est requis pour activer le mode Inspire-moi."
+    }
   },
   "conjugator": {
     "locked": {
@@ -450,90 +378,34 @@
     "toolEnabled": "Gestion des lieux activée.",
     "toolDisabled": "Gestion des lieux désactivée."
   },
+  "characterCategories": {
+    "none": "Sélectionner son rôle",
+    "main": "Principal",
+    "secondary": "Secondaire",
+    "recurring": "Récurrent"
+  },
+  "characterStatus": {
+    "alive": "Vivant",
+    "dead": "Décédé",
+    "unknown": "Inconnu"
+  },
   "characterComponent": {
     "exportSuccess": "Personnage exporté vers la série avec succès.",
     "errorNameRequired": "Le nom du personnage est requis.",
     "errorCategoryRequired": "Le rôle du personnage est requis.",
     "successAdd": "Personnage ajouté avec succès.",
     "successUpdate": "Personnage mis à jour avec succès.",
+    "successDelete": "Personnage supprimé avec succès.",
     "errorAddCharacter": "Erreur lors de l'ajout du personnage.",
     "errorUpdateCharacter": "Erreur lors de la mise à jour du personnage.",
+    "errorDeleteCharacter": "Erreur lors de la suppression du personnage.",
     "errorAddAttribute": "Erreur lors de l'ajout de l'attribut.",
     "errorRemoveAttribute": "Erreur lors de la suppression de l'attribut.",
-    "errorDeleteCharacter": "Erreur lors de la suppression du personnage.",
-    "successDelete": "Personnage supprimé avec succès.",
     "enableTool": "Activer les personnages",
     "enableToolDescription": "Activer la gestion des personnages pour ce livre.",
     "toolEnabled": "Gestion des personnages activée.",
     "toolDisabled": "Gestion des personnages désactivée."
   },
-  "characterDetail": {
-    "back": "Retour",
-    "newCharacter": "Nouveau personnage",
-    "exportToSeries": "Exporter vers la série",
-    "deleteTitle": "Supprimer le personnage",
-    "deleteMessage": "Vous êtes sur le point de supprimer le personnage « {name} » définitivement.",
-    "basicInfo": "Informations de base",
-    "name": "Nom",
-    "namePlaceholder": "Entrer un nom",
-    "lastName": "Nom de famille",
-    "lastNamePlaceholder": "Exemple : Smith",
-    "nickname": "Surnom",
-    "nicknamePlaceholder": "Alias ou surnom",
-    "role": "Rôle",
-    "title": "Titre",
-    "titlePlaceholder": "Ex: Roi, Capitaine, Docteur...",
-    "gender": "Genre",
-    "genderPlaceholder": "Ex: Masculin, Féminin, Non-binaire",
-    "age": "Âge",
-    "agePlaceholder": "Ex: 25",
-    "yearsOld": "ans",
-    "historySection": "Parcours",
-    "biography": "Biographie",
-    "biographyPlaceholder": "La biographie du personnage.",
-    "history": "Histoire",
-    "historyPlaceholder": "Histoire du personnage...",
-    "roleFull": "Rôle dans l'histoire",
-    "roleFullPlaceholder": "Rôle du personnage dans l'histoire",
-    "advancedMode": "Mode avancé",
-    "showAdvanced": "Afficher",
-    "hideAdvanced": "Masquer",
-    "identitySection": "Identité étendue",
-    "species": "Espèce",
-    "speciesPlaceholder": "Humain, Elfe, Vampire...",
-    "nationality": "Nationalité",
-    "nationalityPlaceholder": "Pays ou région d'origine",
-    "status": "Statut",
-    "residence": "Résidence",
-    "residencePlaceholder": "Lieu de résidence actuel",
-    "voiceSection": "Voix du personnage",
-    "speechPattern": "Pattern de parole",
-    "speechPatternPlaceholder": "Comment parle ce personnage ? Accent, tics de langage...",
-    "catchphrase": "Phrase fétiche",
-    "catchphrasePlaceholder": "Une phrase signature du personnage",
-    "authorSection": "Notes de l'auteur",
-    "notes": "Notes",
-    "notesPlaceholder": "Notes personnelles sur ce personnage...",
-    "colorLabel": "Couleur",
-    "colorPlaceholder": "Couleur associée au personnage",
-    "fetchAttributesError": "Erreur lors de la récupération des attributs.",
-    "deleteTitle": "Supprimer le personnage",
-    "deleteMessage": "Êtes-vous sûr de vouloir supprimer {name} ? Cette action est irréversible."
-  },
-  "characterList": {
-    "search": "Rechercher un personnage...",
-    "add": "Ajouter un personnage",
-    "unknownImage": "?",
-    "unknown": "Inconnu",
-    "noLastName": "Sans nom",
-    "noTitle": "Sans titre",
-    "noRole": "Sans rôle",
-    "noCharacters": "Aucun personnage",
-    "noCharactersDescription": "Ajoutez votre premier personnage pour commencer."
-  },
-  "characterSectionElement": {
-    "newItem": "Nouveau {item}"
-  },
   "spellComponent": {
     "exportSuccess": "Sort exporté vers la série avec succès.",
     "enableTool": "Activer le grimoire de sorts",
@@ -604,16 +476,77 @@
   },
   "spellPowerLevels": {
     "none": "Aucun",
-    "cantrip": "Tour de magie",
-    "novice": "Novice",
-    "apprentice": "Apprenti",
-    "journeyman": "Compagnon",
-    "expert": "Expert",
-    "master": "Maître",
-    "grandmaster": "Grand maître",
+    "minor": "Mineur",
+    "moderate": "Modéré",
+    "major": "Majeur",
     "legendary": "Légendaire",
     "divine": "Divin"
   },
+  "characterDetail": {
+    "back": "Retour",
+    "newCharacter": "Nouveau personnage",
+    "exportToSeries": "Exporter vers la série",
+    "deleteTitle": "Supprimer le personnage",
+    "deleteMessage": "Vous êtes sur le point de supprimer le personnage « {name} » définitivement.",
+    "basicInfo": "Informations de base",
+    "name": "Nom",
+    "namePlaceholder": "Entrer un nom",
+    "lastName": "Nom de famille",
+    "lastNamePlaceholder": "Exemple : Smith",
+    "nickname": "Surnom",
+    "nicknamePlaceholder": "Alias ou surnom",
+    "role": "Rôle",
+    "title": "Titre",
+    "titlePlaceholder": "Ex: Roi, Capitaine, Docteur...",
+    "gender": "Genre",
+    "genderPlaceholder": "Ex: Masculin, Féminin, Non-binaire",
+    "age": "Âge",
+    "agePlaceholder": "Ex: 25",
+    "yearsOld": "ans",
+    "species": "Espèce",
+    "speciesPlaceholder": "Ex: Humain, Elfe, Vampire",
+    "nationality": "Nationalité/Origine",
+    "nationalityPlaceholder": "Ex: Française, Elfique",
+    "status": "Statut",
+    "residence": "Lieu de résidence",
+    "residencePlaceholder": "Où vit le personnage",
+    "speechPattern": "Style de langage",
+    "speechPatternPlaceholder": "Tics verbaux, accent, vocabulaire...",
+    "catchphrase": "Phrase fétiche",
+    "catchphrasePlaceholder": "Citation récurrente du personnage",
+    "notes": "Notes de l'auteur",
+    "notesPlaceholder": "Notes personnelles, rappels...",
+    "colorLabel": "Couleur associée",
+    "colorPlaceholder": "Ex: #51AE84 ou vert",
+    "advancedMode": "Mode avancé",
+    "showAdvanced": "Afficher",
+    "hideAdvanced": "Masquer",
+    "identitySection": "Identité étendue",
+    "voiceSection": "Voix du personnage",
+    "authorSection": "Notes de l'auteur",
+    "historySection": "Parcours",
+    "biography": "Biographie",
+    "biographyPlaceholder": "La biographie du personnage.",
+    "history": "Histoire",
+    "historyPlaceholder": "Histoire du personnage...",
+    "roleFull": "Rôle",
+    "roleFullPlaceholder": "Rôle du personnage dans l'histoire",
+    "fetchAttributesError": "Erreur lors de la récupération des attributs."
+  },
+  "characterList": {
+    "search": "Rechercher un personnage...",
+    "add": "Ajouter un personnage",
+    "unknownImage": "?",
+    "unknown": "Inconnu",
+    "noLastName": "Sans nom",
+    "noTitle": "Sans titre",
+    "noRole": "Sans rôle",
+    "noCharacters": "Aucun personnage",
+    "noCharactersDescription": "Ajoutez votre premier personnage pour commencer."
+  },
+  "characterSectionElement": {
+    "newItem": "Nouveau {item}"
+  },
   "aboutEditors": {
     "title": "À propos de Scribe",
     "version": "Version",
@@ -632,30 +565,14 @@
     "manageWorlds": "Gérer les mondes",
     "yourLocations": "Vos lieux",
     "characters": "Les personnages",
-    "spells": "Livre des sortilèges",
+    "spells": "Grimoire de sorts",
+    "quillsense": "Parametres QuillSense",
+    "export": "Exporter votre livre",
     "objectsList": "Liste des objets",
     "bookGoals": "Objectifs du livre",
-    "quillsense": "Parametres QuillSense",
-    "export": "Exporter le livre",
     "save": "Sauvegarder",
-    "notAvailable": "Option non disponible"
-  },
-  "exportOption": {
-    "title": "Exporter votre livre",
-    "description": "Choisissez le format et les chapitres à exporter.",
-    "format": "Format",
-    "selectFormat": "Sélectionner un format",
-    "chapters": "Chapitres",
-    "selectAll": "Tout sélectionner",
-    "deselectAll": "Tout désélectionner",
-    "version": "Version",
-    "export": "Exporter",
-    "exporting": "Exportation en cours...",
-    "noChapters": "Aucun chapitre disponible pour l'export.",
-    "success": "Livre exporté avec succès !",
-    "cancelled": "Export annulé.",
-    "error": "Erreur lors de l'exportation du livre.",
-    "loadingChapters": "Chargement des chapitres..."
+    "notAvailable": "Option non disponible",
+    "unknownError": "Une erreur inconnue est survenue."
   },
   "noBookHome": {
     "title": "Votre œuvre attend ses premiers mots",
@@ -666,14 +583,7 @@
     "preferences": "Préférences",
     "ghostWriter": "Écrivain Fantôme",
     "draftCompanion": "Draft Companion",
-    "save": "Enregistrer",
-    "saving": "Enregistrement en cours...",
-    "close": "Fermer",
-    "toolbar": {
-      "1": "1",
-      "2": "2",
-      "3": "3"
-    }
+    "save": "Enregistrer"
   },
   "draftCompanion": {
     "noPreviousVersion": "Aucune version antérieure de ce chapitre",
@@ -687,13 +597,13 @@
     "words": "Mots",
     "refine": "Perfectionner",
     "refining": "En cours de perfectionnement...",
-    "abortSuccess": "Génération arrêtée. Les totaux de tokens et coûts seront disponibles au prochain rafraîchissement de la page."
+    "abortSuccess": "Génération arrêtée. Les totaux de tokens et coûts seront disponibles au prochain rafraîchissement de la page.",
+    "sseParsingError": "Erreur lors de la lecture des données de génération"
   },
   "ghostWriter": {
     "title": "Écrivain Fantôme",
     "description": "Transformez vos idées en prose captivante",
-    "subscriptionRequired": "Vous devez être abonné à Quill Sense pour utiliser Ghost Writer.",
-    "quillsenseDisabled": "QuillSense est désactivé pour ce livre. Vous pouvez l'activer dans les paramètres du livre.",
+    "subscriptionRequired": "Vous devez être abonné à QuillSense Pro pour utiliser Ghost Writer.",
     "subscribe": "S'abonner",
     "length": "Longueur du texte",
     "minimum": "Minimum",
@@ -768,12 +678,16 @@
       "sépia": "Sépia"
     },
     "focusMode": "Mode focus (masquer les distractions)",
-    "reset": "Réinitialiser les préférences"
+    "reset": "Réinitialiser les préférences",
+    "saveError": "Erreur lors de la sauvegarde des préférences.",
+    "unknownError": "Une erreur inconnue est survenue lors de la sauvegarde des préférences."
   },
   "scribeFooterBar": {
     "sheet": "Feuille : ",
     "madeWith": "Éditeur Scribe fait avec",
-    "words": "Mots",
+    "words": "mots",
+    "pages": "pages",
+    "paragraphs": "paragraphes",
     "books": "Livres"
   },
   "addNewBookForm": {
@@ -829,6 +743,26 @@
       "tip": "💡 Conseil : Commencez par une nouvelle pour maîtriser les bases, puis évoluez vers des formats plus longs selon votre expérience."
     }
   },
+  "addNewSeriesForm": {
+    "title": "Créer une nouvelle série",
+    "name": "Nom de la série",
+    "namePlaceholder": "Ex: Les Chroniques de...",
+    "description": "Description",
+    "descriptionPlaceholder": "Décrivez votre série...",
+    "optional": "optionnel",
+    "selectBooks": "Livres à inclure",
+    "selected": "sélectionné(s)",
+    "noBooks": "Aucun livre disponible",
+    "add": "Créer",
+    "adding": "Création...",
+    "success": "Série créée avec succès.",
+    "error": {
+      "nameMissing": "Le nom de la série est requis.",
+      "nameTooShort": "Le nom est trop court. Minimum 2 caractères requis.",
+      "nameTooLong": "Le nom est trop long. Maximum 100 caractères autorisés.",
+      "addingSeries": "Une erreur est survenue lors de la création de la série."
+    }
+  },
   "searchBook": {
     "placeholder": "Recherchez dans votre bibliothèque..."
   },
@@ -959,6 +893,13 @@
     "chapbook": "Chapbook",
     "novel": "Roman"
   },
+  "bookType": {
+    "short": "Nouvelle",
+    "novelette": "Novelette",
+    "novella": "Novella",
+    "chapbook": "Chapbook",
+    "novel": "Roman"
+  },
   "chapterVersions": {
     "prompt": "Invite",
     "draft": "Brouillon",
@@ -973,276 +914,11 @@
     "world": "Mondes",
     "locations": "Emplacements",
     "characters": "Personnages",
-    "spells": "Sortilèges",
+    "spells": "Grimoire",
+    "quillsense": "QuillSense (IA)",
+    "export": "Exporter",
     "objects": "Objets",
-    "goals": "Buts",
-    "quillsense": "QuillSense",
-    "export": "Export"
-  },
-  "basicInformationSetting": {
-    "error": {
-      "noFileSelected": "Aucun fichier sélectionné.",
-      "removeCover": "Erreur lors de la suppression de la couverture du livre.",
-      "titleRequired": "Le titre est obligatoire.",
-      "update": "Erreur lors de la mise à jour des informations de base du livre.",
-      "unknown": "Une erreur inconnue est survenue."
-    },
-    "success": {
-      "update": "Informations de base mises à jour avec succès."
-    },
-    "fields": {
-      "title": "Titre",
-      "titlePlaceholder": "Entrez le titre du livre",
-      "subtitle": "Sous-titre",
-      "subtitlePlaceholder": "Entrez un sous-titre (optionnel)",
-      "summary": "Résumé",
-      "summaryPlaceholder": "Décrivez brièvement votre livre",
-      "publicationDate": "Date de publication",
-      "wordCount": "Nombre de mots",
-      "wordCountPlaceholder": "Entrez le nombre de mots",
-      "coverImage": "Image couverture",
-      "coverImageAlt": "Couverture actuelle",
-      "generateWithQuillSense": "Générer avec QuillSense"
-    }
-  },
-  "quillConversation": {
-    "emptyMessageError": "Veuillez entrer un message avant de l'envoyer.",
-    "inputPlaceholder": "Qu'avez-vous à l'esprit?",
-    "accessRequired": {
-      "title": "Accès au Clavardage Requis",
-      "description": "Un abonnement à QuillSense intermédiaire est nécessaire, ou une clé Gemini activée dans vos paramètres est nécessaire si vous êtes membre fondateur ou abonné à \"Amenez vos clés\"."
-    },
-    "loadingMessage": "QuillSense écrit",
-    "welcomeTitle": "Bienvenue sur QuillSense",
-    "welcomeDescription": "Votre assistant d'écriture intelligent. Posez-moi des questions sur votre histoire, demandez des conseils d'écriture ou explorez de nouvelles idées créatives.",
-    "welcomeTip": "💡 Astuce : Activez le contexte pour des réponses personnalisées à votre œuvre",
-    "contextLabel": "Contexte :",
-    "context": {
-      "none": "Aucun",
-      "chapter": "Chapitre",
-      "book": "Ouvrage"
-    },
-    "contextAlert": {
-      "title": "Activation du contexte",
-      "chapter": "Le contenu du chapitre actuel sera envoyé à Gemini pour fournir des réponses contextualisées.",
-      "book": "Le contenu complet de votre ouvrage sera envoyé à Gemini pour fournir des réponses contextualisées."
-    },
-    "genericError": "Une erreur est survenue. Veuillez réessayer.",
-    "loadError": "Erreur lors du chargement de la conversation.",
-    "sendError": "Erreur lors de l'envoi du message."
-  },
-  "qsTextPreview": {
-    "title": "Extrait généré",
-    "insert": "Insérer"
-  },
-  "common": {
-    "back": "Retour",
-    "cancel": "Annuler",
-    "confirm": "Confirmer",
-    "create": "Créer",
-    "delete": "Supprimer",
-    "deleting": "Suppression...",
-    "edit": "Modifier",
-    "exportToSeries": "Exporter vers la série",
-    "save": "Enregistrer",
-    "unknownError": "Une erreur inconnue est survenue",
-    "loading": "Chargement..."
-  },
-  "editor": {
-    "error": {
-      "savedFailed": "Échec de l'enregistrement",
-      "unknownError": "Une erreur inconnue est survenue"
-    },
-    "success": {
-      "saved": "Enregistré avec succès"
-    }
-  },
-  "errors": {
-    "wordCountError": "Erreur lors du calcul du nombre de mots"
-  },
-  "homePage": {
-    "loading": "Chargement en cours...",
-    "guide": {
-      "welcome": "Bienvenue {name}",
-      "step0": {
-        "description1": "ERitors est un logiciel assisté par l'intelligence artificielle (API Anthropic et OpenAI) intégrée sous le nom de QuillSense. Son objectif est de vous fournir tous les outils nécessaires pour créer une œuvre complète de A à Z.",
-        "description2": "Ce guide vous accompagnera dans vos premiers pas. Vous pouvez naturellement le passer si vous le souhaitez."
-      },
-      "step1": {
-        "title": "Outils de base",
-        "addBook": "Permet d'ouvrir le panneau pour créer un nouvel ouvrage.",
-        "generateStory": "Permet d'ouvrir le panneau pour générer une histoire courte (nouvelle) via QuillSense."
-      },
-      "step2": {
-        "title": "Recherche",
-        "description": "Une fois votre premier ouvrage créé, vous pourrez le retrouver facilement grâce à cette barre de recherche intégrée."
-      },
-      "step3": {
-        "title": "Gestion de votre compte",
-        "description": "Accédez à vos paramètres pour gérer votre compte, activer l'authentification à deux facteurs (2FA) ou vous déconnecter en toute sécurité."
-      },
-      "step4": {
-        "title": "Prêt à commencer",
-        "description1": "Vous êtes maintenant prêt à utiliser ERitors dans sa plénitude ! Créez votre premier ouvrage ou laissez QuillSense vous inspirer avec une nouvelle histoire.",
-        "description2": "Bonne rédaction ! 🖋️"
-      }
-    },
-    "errors": {
-      "termsError": "Erreur lors de la récupération des conditions d'utilisation",
-      "userNotFound": "Utilisateur non trouvé",
-      "authenticationError": "Erreur pendant l'authentification",
-      "termsAcceptError": "Erreur lors de l'acceptation des conditions d'utilisation",
-      "lastChapterError": "Erreur lors de la récupération du dernier chapitre",
-      "localDataError": "Impossible de charger les données locales",
-      "encryptionKeyError": "Clé de chiffrement non trouvée",
-      "offlineModeError": "Erreur lors de l'initialisation du mode hors ligne",
-      "offlineInitError": "Erreur lors de l'initialisation du mode hors ligne",
-      "syncError": "Erreur lors de la synchronisation des données",
-      "dbInitError": "Erreur lors de l'initialisation de la base de données locale",
-      "offlineError": "Erreur lors de la vérification du mode hors ligne",
-      "fetchBooksError": "Erreur lors de la récupération des livres",
-      "fetchSeriesError": "Erreur lors de la récupération des séries"
-    }
-  },
-  "shortStoryGenerator": {
-    "title": "Générateur d'histoires courtes",
-    "tabs": {
-      "basics": "Bases",
-      "structure": "Structure",
-      "atmosphere": "Ambiance",
-      "result": "Résultat"
-    },
-    "result": {
-      "title": "Ton histoire générée",
-      "generating": "Génération de l'histoire en cours...",
-      "words": "mots",
-      "noResponse": "Aucune réponse reçue du générateur.",
-      "saveError": "Erreur lors de la sauvegarde de l'histoire.",
-      "unknownError": "Une erreur inconnue est survenue.",
-      "abortSuccess": "Génération arrêtée. Les totaux de tokens et coûts seront disponibles au prochain rafraîchissement de la page."
-    },
-    "fields": {
-      "complexity": "Niveau d'écriture",
-      "preset": "Type prédéfini",
-      "language": "Langue",
-      "wordCount": "Nombre de mots",
-      "tense": "Temps du récit",
-      "narrative": "Personne narrative",
-      "dialogue": "Type de dialogues",
-      "directives": "Directives spéciales",
-      "tone": "Ton",
-      "atmosphere": "Ambiance",
-      "character": "Personnages"
-    },
-    "placeholders": {
-      "directives": "Ajoute des consignes ou des détails particuliers (ex: Fin heureuse, événement marquant…)",
-      "tone": "Décris le ton (ex: joyeux, mystérieux, dramatique…)",
-      "atmosphere": "Décris l'ambiance (ex: ensoleillée, sombre, tendue…)",
-      "character": "Liste les personnages principaux"
-    },
-    "actions": {
-      "generate": "Générer l'histoire",
-      "generating": "Génération...",
-      "save": "Enregistrer",
-      "regenerate": "Re-générer",
-      "improve": "Améliorer avec Magic Fix",
-      "stop": "Arrêter"
-    },
-    "navigation": {
-      "previous": "Précédent",
-      "next": "Suivant",
-      "cancel": "Annuler",
-      "close": "Fermer"
-    },
-    "accessDenied": {
-      "title": "Accès refusé",
-      "message": "Désolé! Cette fonctionnalité est réservée aux membres avancés. Tu dois avoir un abonnement supérieur ou l’option activation IA avancée.",
-      "close": "Fermer"
-    }
-  },
-  "userMenu": {
-    "settings": "Paramètres",
-    "logout": "Déconnexion"
-  },
-  "offline": {
-    "mode": {
-      "title": "Mode Hors Ligne",
-      "backToOnline": "Retour à la connexion en ligne"
-    },
-    "pin": {
-      "setup": {
-        "title": "Configurer le PIN",
-        "titleFirstLogin": "Sécurisez votre accès hors ligne",
-        "subtitle": "Protégez vos données locales",
-        "description": "Ce PIN vous permettra d'accéder à vos œuvres même sans connexion internet",
-        "pinLabel": "Code PIN (4-8 chiffres)",
-        "confirmPinLabel": "Confirmer le PIN",
-        "laterButton": "Plus tard",
-        "configureButton": "Configurer le PIN",
-        "configuringButton": "Configuration...",
-        "footer": "Votre PIN est stocké de manière sécurisée sur votre appareil"
-      },
-      "verify": {
-        "title": "Mode Hors Ligne",
-        "subtitle": "Entrez votre PIN pour accéder à vos œuvres locales",
-        "placeholder": "Entrez votre PIN",
-        "enterPin": "Veuillez entrer votre PIN",
-        "incorrect": "PIN incorrect",
-        "tooManyAttempts": "Trop de tentatives échouées. Veuillez vous reconnecter en ligne.",
-        "error": "Erreur lors de la vérification du PIN",
-        "cancelButton": "Annuler",
-        "unlockButton": "Déverrouiller",
-        "verifyingButton": "Vérification...",
-        "attemptsRemaining": "{{count}} tentative(s) restante(s)"
-      },
-      "errors": {
-        "tooShort": "Le PIN doit contenir au moins 4 chiffres",
-        "tooLong": "Le PIN ne peut pas dépasser 8 chiffres",
-        "digitsOnly": "Le PIN doit contenir uniquement des chiffres",
-        "mismatch": "Les codes PIN ne correspondent pas",
-        "setupFailed": "Erreur lors de la configuration du PIN"
-      }
-    }
-  },
-  "deleteBook": {
-    "title": "Suppression du livre",
-    "message": "Vous êtes sur le point de supprimer votre livre définitivement.",
-    "confirm": "Supprimer",
-    "cancel": "Annuler",
-    "deleteLocalToo": "Supprimer également la version locale",
-    "deleteLocalWarning": "Attention : Cette action supprimera le livre du serveur ET de votre appareil. Cette action est irréversible.",
-    "errorUnknown": "Une erreur inconnue est survenue lors de la suppression du livre."
-  },
-  "characterCategories": {
-    "none": "Sélectionner son rôle",
-    "main": "Principal",
-    "secondary": "Secondaire",
-    "recurring": "Récurrent"
-  },
-  "characterStatus": {
-    "alive": "Vivant",
-    "dead": "Décédé",
-    "unknown": "Inconnu"
-  },
-  "addNewSeriesForm": {
-    "title": "Créer une nouvelle série",
-    "name": "Nom de la série",
-    "namePlaceholder": "Ex: Les Chroniques de...",
-    "description": "Description",
-    "descriptionPlaceholder": "Décrivez votre série...",
-    "optional": "optionnel",
-    "selectBooks": "Livres à inclure",
-    "selected": "sélectionné(s)",
-    "noBooks": "Aucun livre disponible",
-    "add": "Créer",
-    "adding": "Création...",
-    "success": "Série créée avec succès.",
-    "error": {
-      "nameMissing": "Le nom de la série est requis.",
-      "nameTooShort": "Le nom est trop court. Minimum 2 caractères requis.",
-      "nameTooLong": "Le nom est trop long. Maximum 100 caractères autorisés.",
-      "addingSeries": "Une erreur est survenue lors de la création de la série."
-    }
+    "goals": "Buts"
   },
   "seriesSetting": {
     "basicInformation": "Informations",
@@ -1312,99 +988,426 @@
     "book": "livre",
     "books": "livres",
     "series": "Série",
-    "settings": "Paramètres de la série",
-    "synced": "Synchronisé",
-    "localOnly": "Local uniquement",
-    "serverOnly": "Sur le serveur uniquement",
-    "toSyncFromServer": "Télécharger depuis le serveur",
-    "toSyncToServer": "Envoyer vers le serveur",
-    "uploadError": "Erreur lors du téléversement de la série.",
-    "downloadError": "Erreur lors du téléchargement de la série.",
-    "syncFromServerError": "Erreur lors de la synchronisation depuis le serveur.",
-    "syncToServerError": "Erreur lors de la synchronisation vers le serveur.",
-    "refreshError": "Erreur lors du rafraîchissement des séries."
+    "settings": "Paramètres de la série"
   },
-  "bookType": {
-    "short": "Nouvelle",
-    "novelette": "Novelette",
-    "novella": "Novella",
-    "chapbook": "Chapbook",
-    "novel": "Roman"
+  "basicInformationSetting": {
+    "error": {
+      "noFileSelected": "Aucun fichier sélectionné.",
+      "removeCover": "Erreur lors de la suppression de la couverture du livre.",
+      "titleRequired": "Le titre est obligatoire.",
+      "update": "Erreur lors de la mise à jour des informations de base du livre.",
+      "unknown": "Une erreur inconnue est survenue."
+    },
+    "success": {
+      "update": "Informations de base mises à jour avec succès."
+    },
+    "fields": {
+      "title": "Titre",
+      "titlePlaceholder": "Entrez le titre du livre",
+      "subtitle": "Sous-titre",
+      "subtitlePlaceholder": "Entrez un sous-titre (optionnel)",
+      "summary": "Résumé",
+      "summaryPlaceholder": "Décrivez brièvement votre livre",
+      "publicationDate": "Date de publication",
+      "wordCount": "Nombre de mots",
+      "wordCountPlaceholder": "Entrez le nombre de mots",
+      "coverImage": "Image couverture",
+      "coverImageAlt": "Couverture actuelle",
+      "generateWithQuillSense": "Générer avec QuillSense"
+    }
+  },
+  "quillList": {
+    "untitled": "Sans titre",
+    "error": {
+      "unknown": "Une erreur inconnue est survenue lors du chargement des conversations."
+    }
+  },
+  "quillConversation": {
+    "emptyMessageError": "Veuillez entrer un message avant de l'envoyer.",
+    "inputPlaceholder": "Qu'avez-vous à l'esprit?",
+    "accessRequired": {
+      "title": "Accès au Clavardage Requis",
+      "description": "Un abonnement à QuillSense intermédiaire est nécessaire, ou une clé Gemini activée dans vos paramètres est nécessaire si vous êtes membre fondateur ou abonné à \"Amenez vos clés\"."
+    },
+    "loadingMessage": "QuillSense écrit",
+    "welcomeTitle": "Bienvenue sur QuillSense",
+    "welcomeDescription": "Votre assistant d'écriture intelligent. Posez-moi des questions sur votre histoire, demandez des conseils d'écriture ou explorez de nouvelles idées créatives.",
+    "welcomeTip": "💡 Astuce : Activez le contexte pour des réponses personnalisées à votre œuvre",
+    "contextLabel": "Contexte :",
+    "context": {
+      "none": "Aucun",
+      "chapter": "Chapitre",
+      "book": "Ouvrage"
+    },
+    "contextAlert": {
+      "title": "Activation du contexte",
+      "chapter": "Le contenu du chapitre actuel sera envoyé à Gemini pour fournir des réponses contextualisées.",
+      "book": "Le contenu complet de votre ouvrage sera envoyé à Gemini pour fournir des réponses contextualisées."
+    },
+    "genericError": "Une erreur est survenue. Veuillez réessayer.",
+    "loadError": "Erreur lors du chargement de la conversation.",
+    "sendError": "Erreur lors de l'envoi du message."
+  },
+  "qsTextPreview": {
+    "title": "Extrait généré",
+    "insert": "Insérer"
+  },
+  "common": {
+    "back": "Retour",
+    "cancel": "Annuler",
+    "confirm": "Confirmer",
+    "create": "Créer",
+    "delete": "Supprimer",
+    "deleting": "Suppression...",
+    "edit": "Modifier",
+    "exportToSeries": "Exporter vers la série",
+    "save": "Enregistrer",
+    "unknownError": "Une erreur inconnue est survenue"
+  },
+  "spellPowerLevels": {
+    "none": "Aucun",
+    "cantrip": "Tour de magie",
+    "novice": "Novice",
+    "apprentice": "Apprenti",
+    "journeyman": "Compagnon",
+    "expert": "Expert",
+    "master": "Maître",
+    "grandmaster": "Grand maître",
+    "legendary": "Légendaire",
+    "divine": "Divin"
+  },
+  "editor": {
+    "error": {
+      "savedFailed": "Échec de l'enregistrement",
+      "unknownError": "Une erreur inconnue est survenue",
+      "parsingContent": "Erreur lors du chargement du contenu du chapitre"
+    },
+    "success": {
+      "saved": "Enregistré avec succès"
+    }
+  },
+  "errors": {
+    "wordCountError": "Erreur lors du calcul du nombre de mots"
+  },
+  "homePage": {
+    "loading": "Chargement en cours...",
+    "guide": {
+      "welcome": "Bienvenue {name}",
+      "step0": {
+        "description1": "ERitors est un logiciel assisté par l'intelligence artificielle (API Anthropic et OpenAI) intégrée sous le nom de QuillSense. Son objectif est de vous fournir tous les outils nécessaires pour créer une œuvre complète de A à Z.",
+        "description2": "Ce guide vous accompagnera dans vos premiers pas. Vous pouvez naturellement le passer si vous le souhaitez."
+      },
+      "step1": {
+        "title": "Outils de base",
+        "addBook": "Permet d'ouvrir le panneau pour créer un nouvel ouvrage.",
+        "generateStory": "Permet d'ouvrir le panneau pour générer une histoire courte (nouvelle) via QuillSense."
+      },
+      "step2": {
+        "title": "Recherche",
+        "description": "Une fois votre premier ouvrage créé, vous pourrez le retrouver facilement grâce à cette barre de recherche intégrée."
+      },
+      "step3": {
+        "title": "Gestion de votre compte",
+        "description": "Accédez à vos paramètres pour gérer votre compte, activer l'authentification à deux facteurs (2FA) ou vous déconnecter en toute sécurité."
+      },
+      "step4": {
+        "title": "Prêt à commencer",
+        "description1": "Vous êtes maintenant prêt à utiliser ERitors dans sa plénitude ! Créez votre premier ouvrage ou laissez QuillSense vous inspirer avec une nouvelle histoire.",
+        "description2": "Bonne rédaction ! 🖋️"
+      }
+    },
+    "errors": {
+      "termsError": "Erreur lors de la récupération des conditions d'utilisation",
+      "userNotFound": "Utilisateur non trouvé",
+      "authenticationError": "Erreur pendant l'authentification",
+      "termsAcceptError": "Erreur lors de l'acceptation des conditions d'utilisation",
+      "lastChapterError": "Erreur lors de la récupération du dernier chapitre"
+    }
+  },
+  "quillsenseSetting": {
+    "enableQuillsense": "Activer QuillSense",
+    "enableDescription": "Lorsque desactive, toutes les fonctionnalites d'IA seront masquees pour ce livre.",
+    "advancedPrompt": "Prompt avance pour Ghost Writer",
+    "advancedPromptPlaceholder": "Entrez des instructions personnalisees pour guider l'IA lors de la generation de texte...",
+    "advancedPromptDescription": "Ce prompt sera utilise comme directive prioritaire lors de la generation de texte avec Ghost Writer.",
+    "saveSuccess": "Parametres QuillSense sauvegardes avec succes.",
+    "saveError": "Erreur lors de la sauvegarde des parametres.",
+    "unknownError": "Une erreur inconnue est survenue.",
+    "enable_characters": "Activer les personnages",
+    "enable_worlds": "Activer les mondes",
+    "enable_locations": "Activer les lieux"
+  },
+  "shortStoryGenerator": {
+    "title": "Générateur d'histoires courtes",
+    "tabs": {
+      "basics": "Bases",
+      "structure": "Structure",
+      "atmosphere": "Ambiance",
+      "result": "Résultat"
+    },
+    "result": {
+      "title": "Ton histoire générée",
+      "generating": "Génération de l'histoire en cours...",
+      "words": "mots",
+      "noResponse": "Aucune réponse reçue du générateur.",
+      "saveError": "Erreur lors de la sauvegarde de l'histoire.",
+      "unknownError": "Une erreur inconnue est survenue.",
+      "abortSuccess": "Génération arrêtée. Les totaux de tokens et coûts seront disponibles au prochain rafraîchissement de la page."
+    },
+    "fields": {
+      "complexity": "Niveau d'écriture",
+      "preset": "Type prédéfini",
+      "language": "Langue",
+      "wordCount": "Nombre de mots",
+      "tense": "Temps du récit",
+      "narrative": "Personne narrative",
+      "dialogue": "Type de dialogues",
+      "directives": "Directives spéciales",
+      "tone": "Ton",
+      "atmosphere": "Ambiance",
+      "character": "Personnages"
+    },
+    "placeholders": {
+      "directives": "Ajoute des consignes ou des détails particuliers (ex: Fin heureuse, événement marquant…)",
+      "tone": "Décris le ton (ex: joyeux, mystérieux, dramatique…)",
+      "atmosphere": "Décris l'ambiance (ex: ensoleillée, sombre, tendue…)",
+      "character": "Liste les personnages principaux"
+    },
+    "actions": {
+      "generate": "Générer l'histoire",
+      "generating": "Génération...",
+      "save": "Enregistrer",
+      "regenerate": "Re-générer",
+      "improve": "Améliorer avec Magic Fix",
+      "stop": "Arrêter"
+    },
+    "navigation": {
+      "previous": "Précédent",
+      "next": "Suivant",
+      "cancel": "Annuler",
+      "close": "Fermer"
+    },
+    "accessDenied": {
+      "title": "Accès refusé",
+      "message": "Désolé! Cette fonctionnalité est réservée aux membres avancés. Tu dois avoir un abonnement supérieur ou l'option activation IA avancée.",
+      "close": "Fermer"
+    }
   },
   "syncField": {
     "uploadSuccess": "{count} élément(s) mis à jour avec succès.",
     "uploadTooltip": "Envoyer vers la série",
     "downloadTooltip": "Récupérer depuis la série"
   },
+  "exportOption": {
+    "formatLabel": "Format d'export",
+    "chapters": "Chapitres",
+    "loadingChapters": "Chargement des chapitres...",
+    "noChaptersAvailable": "Aucun chapitre disponible pour l'export.",
+    "selectAll": "Tout sélectionner",
+    "deselectAll": "Tout désélectionner",
+    "exportButton": "Exporter",
+    "exporting": "Exportation en cours...",
+    "noBookSelected": "Aucun livre sélectionné.",
+    "noChaptersSelected": "Veuillez sélectionner au moins un chapitre.",
+    "downloadSuccess": "Votre fichier {format} a été téléchargé avec succès.",
+    "downloadError": "Échec du téléchargement.",
+    "serverError": "Erreur du serveur lors de l'export.",
+    "unknownError": "Une erreur inconnue est survenue."
+  },
   "seriesImport": {
     "importButton": "Importer",
     "importFromSeries": "Importer depuis la série",
     "selectElement": "Sélectionner un élément"
   },
-  "quillSenseSetting": {
-    "title": "Paramètres QuillSense",
-    "description": "Gérez les fonctionnalités d'intelligence artificielle pour ce livre.",
-    "enableSection": "Activer/Désactiver QuillSense",
-    "enableLabel": "QuillSense activé",
-    "enableDescription": "Lorsque activé, les fonctionnalités d'IA comme Ghost Writer et QuillSense seront disponibles pour ce livre.",
-    "advancedSection": "Paramètres avancés",
-    "advancedPromptLabel": "Invite avancée",
-    "advancedPromptPlaceholder": "Entrez des instructions personnalisées pour l'IA...",
-    "advancedPromptHint": "Ces instructions seront incluses dans chaque génération de texte pour ce livre.",
-    "disabledWarning": "QuillSense est désactivé. Les fonctionnalités d'IA ne seront pas disponibles pour ce livre.",
-    "errorFetch": "Erreur lors de la récupération des paramètres QuillSense.",
-    "errorSave": "Erreur lors de la sauvegarde des paramètres.",
-    "errorUnknown": "Une erreur inconnue est survenue.",
-    "successSave": "Paramètres QuillSense sauvegardés avec succès.",
-    "noBookSelected": "Aucun livre sélectionné.",
-    "enable_characters": "Activer la gestion des personnages pour ce livre",
-    "enable_worlds": "Activer la gestion des mondes pour ce livre",
-    "enable_locations": "Activer la gestion des lieux pour ce livre"
+  "loginPage": {
+    "title": "Connexion",
+    "welcome": "Bienvenue sur ERitors Scribe",
+    "orSocial": "ou connectez-vous avec",
+    "offlineWarning": {
+      "title": "Mode hors-ligne requis",
+      "message": "Vous n'êtes pas connecté à Internet. Pour utiliser l'application hors-ligne, vous devez d'abord vous connecter au moins une fois en ligne."
+    }
   },
-  "importBook": {
-    "header": {
-      "title": "Importer un livre"
-    },
-    "pickFile": "Choisir un fichier DOCX",
-    "parsing": "Analyse du fichier en cours...",
-    "chaptersDetected": "{count} chapitres détectés",
-    "noChaptersDetected": "Aucun chapitre détecté dans le fichier",
+  "loginForm": {
+    "submit": "Se connecter",
     "fields": {
-      "title": {
-        "label": "Titre du livre",
-        "placeholder": "Entrez le titre"
+      "email": {
+        "label": "Adresse e-mail",
+        "placeholder": "Entrez votre adresse e-mail"
       },
-      "subTitle": {
-        "label": "Sous-titre",
-        "placeholder": "Entrez le sous-titre"
-      },
-      "summary": {
-        "label": "Résumé",
-        "placeholder": "Entrez un résumé"
-      },
-      "type": {
-        "label": "Type de livre"
-      },
-      "version": {
-        "label": "Version des chapitres"
+      "password": {
+        "label": "Mot de passe",
+        "placeholder": "Entrez votre mot de passe",
+        "forgot": "Mot de passe oublié ?"
       }
     },
-    "chapters": {
-      "title": "Chapitres à importer",
-      "words": "{count} mots",
-      "selectAll": "Tout sélectionner",
-      "deselectAll": "Tout désélectionner"
-    },
-    "submit": "Importer",
-    "importing": "Import en cours...",
-    "success": "Livre importé avec succès",
     "error": {
-      "titleRequired": "Le titre du livre est requis",
-      "typeRequired": "Le type de livre est requis",
-      "noChaptersSelected": "Sélectionnez au moins un chapitre",
-      "parseFailed": "Erreur lors de l'analyse du fichier",
-      "importFailed": "Erreur lors de l'import",
-      "invalidFormat": "Format invalide. Seuls les fichiers DOCX sont acceptés"
+      "emailRequired": "Veuillez entrer votre adresse e-mail.",
+      "passwordRequired": "Veuillez entrer votre mot de passe.",
+      "emailLength": "L'adresse e-mail doit contenir entre 5 et 100 caractères.",
+      "emailInvalidChars": "L'adresse e-mail contient des caractères invalides.",
+      "connection": "Erreur de connexion. Vérifiez vos identifiants.",
+      "server": "Erreur du serveur. Veuillez réessayer plus tard.",
+      "unknown": "Une erreur inconnue est survenue."
+    }
+  },
+  "socialForm": {
+    "error": {
+      "connection": "Erreur de connexion avec le fournisseur."
+    }
+  },
+  "registerPage": {
+    "title": "Inscription",
+    "subtitle": "Créez votre compte ERitors",
+    "backToLogin": "Retour à la connexion",
+    "progress": {
+      "infos": "Informations",
+      "verif": "Vérification"
+    }
+  },
+  "registerStepOne": {
+    "next": "Continuer",
+    "fields": {
+      "firstName": {
+        "label": "Prénom",
+        "placeholder": "Entrez votre prénom"
+      },
+      "lastName": {
+        "label": "Nom",
+        "placeholder": "Entrez votre nom"
+      },
+      "username": {
+        "label": "Nom d'utilisateur",
+        "placeholder": "Choisissez un nom d'utilisateur",
+        "note": "Le nom d'utilisateur doit contenir entre 3 et 50 caractères."
+      },
+      "email": {
+        "label": "Adresse e-mail",
+        "placeholder": "Entrez votre adresse e-mail"
+      },
+      "password": {
+        "label": "Mot de passe",
+        "placeholder": "Choisissez un mot de passe"
+      },
+      "repeatPassword": {
+        "label": "Confirmer le mot de passe",
+        "placeholder": "Confirmez votre mot de passe"
+      }
+    },
+    "error": {
+      "requiredFields": "Tous les champs sont requis.",
+      "firstNameLength": "Le prénom doit contenir entre 2 et 50 caractères.",
+      "lastNameLength": "Le nom doit contenir entre 2 et 50 caractères.",
+      "usernameLength": "Le nom d'utilisateur doit contenir entre 3 et 50 caractères.",
+      "invalidInput": "Un ou plusieurs champs contiennent des caractères invalides.",
+      "passwordMismatch": "Les mots de passe ne correspondent pas.",
+      "preRegister": "Erreur lors de la pré-inscription.",
+      "unknown": "Une erreur inconnue est survenue."
+    },
+    "success": {
+      "preRegister": "Un code de vérification a été envoyé à votre adresse e-mail."
+    }
+  },
+  "registerStepTwo": {
+    "verify": "Vérifier",
+    "back": "Retour",
+    "confirmed": "Votre compte a été vérifié avec succès !",
+    "start": "Commencer",
+    "instructions": {
+      "sent": "Un code de vérification a été envoyé à votre adresse e-mail.",
+      "checkInbox": "Vérifiez votre boîte de réception et vos spams."
+    },
+    "fields": {
+      "code": {
+        "label": "Code de vérification",
+        "placeholder": "Entrez le code reçu par e-mail"
+      }
+    },
+    "error": {
+      "codeIncorrect": "Le code de vérification est incorrect.",
+      "unknown": "Une erreur inconnue est survenue."
+    },
+    "success": {
+      "verified": "Votre compte a été vérifié avec succès !"
+    }
+  },
+  "resetPassword": {
+    "title": "Réinitialisation",
+    "subtitle": "Réinitialisez votre mot de passe",
+    "verify": "Vérifier l'e-mail",
+    "confirm": "Confirmer le code",
+    "changePassword": "Changer le mot de passe",
+    "back": "Retour",
+    "backToLogin": "Retour à la connexion",
+    "success": "Votre mot de passe a été réinitialisé avec succès !",
+    "goToLogin": "Se connecter",
+    "progress": {
+      "email": "E-mail",
+      "verification": "Vérification",
+      "final": "Nouveau mot de passe"
+    },
+    "fields": {
+      "email": {
+        "label": "Adresse e-mail",
+        "placeholder": "Entrez votre adresse e-mail"
+      },
+      "code": {
+        "label": "Code de vérification",
+        "placeholder": "Entrez le code reçu"
+      },
+      "newPassword": {
+        "label": "Nouveau mot de passe",
+        "placeholder": "Entrez votre nouveau mot de passe"
+      }
+    },
+    "error": {
+      "emailInvalid": "Veuillez entrer une adresse e-mail valide.",
+      "emailFormat": "Le format de l'adresse e-mail est invalide.",
+      "emailServer": "Erreur du serveur lors de la vérification de l'e-mail.",
+      "emailUnknown": "Une erreur inconnue est survenue.",
+      "codeServer": "Erreur du serveur lors de la vérification du code.",
+      "codeUnknown": "Une erreur inconnue est survenue.",
+      "passwordServer": "Erreur du serveur lors du changement de mot de passe.",
+      "passwordUnknown": "Une erreur inconnue est survenue."
+    }
+  },
+  "offline": {
+    "mode": {
+      "title": "Mode hors-ligne",
+      "backToOnline": "Retour en ligne"
+    },
+    "pin": {
+      "errors": {
+        "tooShort": "Le code PIN doit contenir au moins 4 chiffres.",
+        "tooLong": "Le code PIN ne peut pas dépasser 8 chiffres.",
+        "digitsOnly": "Le code PIN ne doit contenir que des chiffres.",
+        "mismatch": "Les codes PIN ne correspondent pas.",
+        "setupFailed": "Erreur lors de la configuration du PIN."
+      },
+      "setup": {
+        "title": "Configurer le PIN hors-ligne",
+        "titleFirstLogin": "Configurer un PIN pour le mode hors-ligne",
+        "subtitle": "Ce PIN vous permettra d'accéder à vos données sans connexion Internet.",
+        "description": "Choisissez un code PIN de 4 à 8 chiffres pour sécuriser l'accès hors-ligne à vos données.",
+        "pinLabel": "Code PIN",
+        "confirmPinLabel": "Confirmer le code PIN",
+        "laterButton": "Plus tard",
+        "configuringButton": "Configuration...",
+        "configureButton": "Configurer le PIN",
+        "footer": "Vous pourrez modifier ce PIN dans les paramètres."
+      },
+      "verify": {
+        "title": "Vérification PIN",
+        "subtitle": "Entrez votre code PIN pour accéder à vos données hors-ligne.",
+        "placeholder": "Code PIN",
+        "enterPin": "Veuillez entrer votre code PIN.",
+        "incorrect": "Code PIN incorrect.",
+        "tooManyAttempts": "Trop de tentatives. Veuillez vous reconnecter en ligne.",
+        "error": "Erreur lors de la vérification du PIN.",
+        "cancelButton": "Annuler",
+        "verifyingButton": "Vérification...",
+        "unlockButton": "Déverrouiller"
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/lib/models/Book.ts b/lib/models/Book.ts
deleted file mode 100644
index 9f64166..0000000
--- a/lib/models/Book.ts
+++ /dev/null
@@ -1,187 +0,0 @@
-import {Author} from './User';
-import {ActChapter, ChapterProps} from "@/lib/models/Chapter";
-import {SelectBoxProps} from "@/shared/interface";
-import {
-    BookActSummariesTable,
-    BookAIGuideLineTable,
-    BookChapterContentTable, BookChapterInfosTable,
-    BookChaptersTable, BookCharactersAttributesTable, BookCharactersTable, BookGuideLineTable, BookIncidentsTable,
-    BookIssuesTable, BookLocationTable, BookPlotPointsTable, BookWorldElementsTable, BookWorldTable,
-    EritBooksTable, LocationElementTable, LocationSubElementTable
-} from "@/lib/models/BookTables";
-import {
-    SyncedActSummary, SyncedAIGuideLine,
-    SyncedChapter,
-    SyncedCharacter, SyncedGuideLine,
-    SyncedIncident, SyncedIssue,
-    SyncedLocation,
-    SyncedPlotPoint,
-    SyncedWorld
-} from "@/lib/models/SyncedBook";
-
-export interface CompleteBook {
-    eritBooks: EritBooksTable[];
-    actSummaries: BookActSummariesTable[];
-    aiGuideLine: BookAIGuideLineTable[];
-    chapters: BookChaptersTable[];
-    chapterContents: BookChapterContentTable[];
-    chapterInfos: BookChapterInfosTable[];
-    characters: BookCharactersTable[];
-    characterAttributes: BookCharactersAttributesTable[];
-    guideLine: BookGuideLineTable[];
-    incidents: BookIncidentsTable[];
-    issues: BookIssuesTable[];
-    locations: BookLocationTable[];
-    plotPoints: BookPlotPointsTable[];
-    worlds: BookWorldTable[];
-    worldElements: BookWorldElementsTable[];
-    locationElements: LocationElementTable[];
-    locationSubElements: LocationSubElementTable[];
-}
-
-export interface SyncedBook {
-    id: string;
-    type: string;
-    title: string;
-    subTitle: string | null;
-    lastUpdate: number;
-    chapters: SyncedChapter[];
-    characters: SyncedCharacter[];
-    locations: SyncedLocation[];
-    worlds: SyncedWorld[];
-    incidents: SyncedIncident[];
-    plotPoints: SyncedPlotPoint[];
-    issues: SyncedIssue[];
-    actSummaries: SyncedActSummary[];
-    guideLine: SyncedGuideLine | null;
-    aiGuideLine: SyncedAIGuideLine | null;
-}
-
-export interface BookToolsSettings {
-    characters: boolean;
-    worlds: boolean;
-    locations: boolean;
-    spells: boolean;
-}
-
-export interface BookProps {
-    bookId: string;
-    type: string;
-    title: string;
-    author?: Author;
-    serie?: number;
-    seriesId?: string | null;
-    subTitle?: string;
-    summary?: string;
-    publicationDate?: string;
-    desiredWordCount?: number;
-    totalWordCount?: number;
-    coverImage?: string;
-    localBook?: boolean;
-    chapters?: ChapterProps[];
-    quillsenseEnabled?: boolean;
-    tools?: BookToolsSettings;
-}
-
-export interface GuideLine {
-    tone: string;
-    atmosphere: string;
-    writingStyle: string;
-    themes: string;
-    symbolism: string;
-    motifs: string;
-    narrativeVoice: string;
-    pacing: string;
-    intendedAudience: string;
-    keyMessages: string;
-}
-
-export interface GuideLineAI {
-    narrativeType: number|null;
-    dialogueType: number|null;
-    globalResume: string|null;
-    atmosphere: string|null;
-    verbeTense: number|null;
-    langue: number|null;
-    currentResume: string|null;
-    themes: string|null;
-}
-
-export interface PlotPoint {
-    plotPointId: string;
-    title: string;
-    summary: string;
-    linkedIncidentId: string;
-    chapters?: ActChapter[];
-}
-
-export interface Incident {
-    incidentId: string;
-    title: string;
-    summary: string;
-    chapters?: ActChapter[];
-}
-
-export interface Issue {
-    name: string;
-    id: string;
-}
-
-export interface Act {
-    id: number;
-    summary: string | null;
-    incidents?: Incident[];
-    plotPoints?: PlotPoint[];
-    chapters?: ActChapter[];
-}
-
-export interface Tag {
-    label: string,
-    value: string,
-}
-
-export interface BookTags {
-    characters: Tag[];
-    locations: Tag[];
-    objects: Tag[];
-    worldElements: Tag[];
-}
-
-export const bookTypes: SelectBoxProps[] = [
-    {label: 'bookTypes.short', value: 'short'},
-    {label: 'bookTypes.novelette', value: 'novelette'},
-    {label: 'bookTypes.novella', value: 'long'},
-    {label: 'bookTypes.chapbook', value: 'chapbook'},
-    {label: 'bookTypes.novel', value: 'novel'},
-]
-
-export default class Book {
-    constructor() {
-    }
-
-    static booksToSelectBox(books: SyncedBook[]): SelectBoxProps[] {
-        return books.map((book: SyncedBook): SelectBoxProps => {
-            return {
-                label: book.title,
-                value: book.id,
-            }
-        });
-    }
-
-    static getBookTypeLabel(value: string): string {
-        switch (value) {
-            case 'short':
-                return 'bookTypes.short';
-            case 'novelette':
-                return 'bookTypes.novelette';
-            case 'long':
-                return 'bookTypes.novella';
-            case 'chapbook':
-                return 'bookTypes.chapbook';
-            case 'novel':
-                return 'bookTypes.novel';
-            default:
-                return 'bookTypes.novel';
-        }
-    }
-}
diff --git a/lib/models/BookSerie.ts b/lib/models/BookSerie.ts
deleted file mode 100755
index 3d5b1ff..0000000
--- a/lib/models/BookSerie.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default class BookSerie{
-
-}
diff --git a/lib/models/Chapter.ts b/lib/models/Chapter.ts
deleted file mode 100644
index e00b01b..0000000
--- a/lib/models/Chapter.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-import {SelectBoxProps} from "@/shared/interface";
-
-export interface ActChapter {
-    chapterInfoId: string;
-    chapterId: string;
-    title: string;
-    chapterOrder: number;
-    actId: number;
-    incidentId?: string;
-    plotPointId?: string;
-    summary: string;
-    goal: string;
-}
-
-export interface ChapterListProps {
-    chapterId: string;
-    title: string;
-    summary?: string;
-    chapterOrder?: number;
-    goal?: string;
-}
-
-export interface ChapterProps {
-    chapterId: string;
-    chapterOrder: number;
-    title: string;
-    chapterContent: ChapterContent;
-}
-
-export interface ChapterContent {
-    version: number;
-    content: string;
-    wordsCount: number;
-}
-
-export interface ChapterVersion {
-    value: number;
-    label: 'Invite' | 'Brouillon' | 'Perfectionnement' | 'Révision' | 'Finale';
-}
-
-export type TiptapNode = {
-    type: string;
-    content?: TiptapNode[];
-    text?: string;
-    attrs?: {
-        [key: string]: any;
-    };
-};
-
-
-export type ExportFormat = 'epub' | 'pdf' | 'docx';
-
-export interface ChapterExportInfo {
-    chapterId: string;
-    title: string;
-    chapterOrder: number;
-    availableVersions: number[];
-}
-
-export interface ChapterExportSelection {
-    chapterId: string;
-    version: number;
-    selected: boolean;
-}
-
-export const chapterVersions: SelectBoxProps[] = [
-    {value: '1', label: 'chapterVersions.prompt'},
-    {value: '2', label: 'chapterVersions.draft'},
-    {value: '3', label: 'chapterVersions.refine'},
-    {value: '4', label: 'chapterVersions.review'},
-    {value: '5', label: 'chapterVersions.final'},
-];
-
-export default class Chapter {
-    public static getPageCount(text: string): number {
-        const charactersPerLine = 90;
-        const linesPerPage = 40;
-
-        const lines: string[] = text.split('\n');
-        let totalLines: number = 0;
-
-        lines.forEach((line: string) => {
-            const lineLength: number = line.length;
-            const estimatedLines: number = Math.ceil(lineLength / charactersPerLine);
-            totalLines += estimatedLines;
-        });
-
-        // Calcul du nombre de pages
-        return Math.ceil(totalLines / linesPerPage);
-    }
-    static convertTiptapToHTML(node: TiptapNode): string {
-        let html = '';
-
-        switch (node.type) {
-            case 'doc':
-                if (node.content) {
-                    node.content.forEach(childNode => {
-                        html += this.convertTiptapToHTML(childNode);
-                    });
-                }
-                break;
-
-            case 'paragraph':
-                html += '<p>';
-                if (node.content) {
-                    node.content.forEach(childNode => {
-                        html += this.convertTiptapToHTML(childNode);
-                    });
-                }
-                html += '</p>';
-                break;
-
-            case 'text':
-                let textContent = node.text || '';
-
-                // Apply attributes like bold, italic, etc.
-                if (node.attrs) {
-                    if (node.attrs.bold) {
-                        textContent = `<strong>${textContent}</strong>`;
-                    }
-                    if (node.attrs.italic) {
-                        textContent = `<em>${textContent}</em>`;
-                    }
-                    if (node.attrs.underline) {
-                        textContent = `<u>${textContent}</u>`;
-                    }
-                    if (node.attrs.strike) {
-                        textContent = `<s>${textContent}</s>`;
-                    }
-                    if (node.attrs.link) {
-                        textContent = `<a href="${node.attrs.link.href}">${textContent}</a>`;
-                    }
-                }
-
-                html += textContent;
-                break;
-
-            case 'heading':
-                const level = node.attrs?.level || 1;
-                html += `<h${level}>`;
-                if (node.content) {
-                    node.content.forEach(childNode => {
-                        html += this.convertTiptapToHTML(childNode);
-                    });
-                }
-                html += `</h${level}>`;
-                break;
-
-            case 'bulletList':
-                html += '<ul>';
-                if (node.content) {
-                    node.content.forEach(childNode => {
-                        html += this.convertTiptapToHTML(childNode);
-                    });
-                }
-                html += '</ul>';
-                break;
-
-            case 'orderedList':
-                html += '<ol>';
-                if (node.content) {
-                    node.content.forEach(childNode => {
-                        html += this.convertTiptapToHTML(childNode);
-                    });
-                }
-                html += '</ol>';
-                break;
-
-            case 'listItem':
-                html += '<li>';
-                if (node.content) {
-                    node.content.forEach(childNode => {
-                        html += this.convertTiptapToHTML(childNode);
-                    });
-                }
-                html += '</li>';
-                break;
-
-            case 'blockquote':
-                html += '<blockquote>';
-                if (node.content) {
-                    node.content.forEach(childNode => {
-                        html += this.convertTiptapToHTML(childNode);
-                    });
-                }
-                html += '</blockquote>';
-                break;
-
-            case 'codeBlock':
-                html += '<pre><code>';
-                if (node.content) {
-                    node.content.forEach(childNode => {
-                        html += this.convertTiptapToHTML(childNode);
-                    });
-                }
-                html += '</code></pre>';
-                break;
-
-            default:
-                console.warn(`Unhandled node type: ${node.type}`);
-                if (node.content) {
-                    node.content.forEach(childNode => {
-                        html += this.convertTiptapToHTML(childNode);
-                    });
-                }
-                break;
-        }
-
-        return html;
-    }
-}
diff --git a/lib/models/Character.ts b/lib/models/Character.ts
deleted file mode 100755
index d48eb62..0000000
--- a/lib/models/Character.ts
+++ /dev/null
@@ -1,228 +0,0 @@
-import {
-    faBrain,
-    faBullseye,
-    faExclamationTriangle,
-    faFire,
-    faRuler,
-    faShieldAlt,
-    faUsers,
-    faWrench,
-    faRoute,
-    faUserSecret,
-    faGhost,
-    faHeartBroken,
-    faHandHoldingHeart,
-    faBolt,
-    faQuoteLeft,
-    faFingerprint,
-    faBox,
-    faPeopleGroup,
-} from '@fortawesome/free-solid-svg-icons';
-import {SelectBoxProps} from "@/shared/interface";
-
-type CharacterCategory = 'main' | 'secondary' | 'recurring' | 'none';
-
-export const characterCategories: SelectBoxProps[] = [
-    {value: 'none', label: 'characterCategories.none'},
-    {value: 'main', label: 'characterCategories.main'},
-    {value: 'secondary', label: 'characterCategories.secondary'},
-    {value: 'recurring', label: 'characterCategories.recurring'},
-];
-
-export const characterStatus: SelectBoxProps[] = [
-    {value: 'alive', label: 'characterStatus.alive'},
-    {value: 'dead', label: 'characterStatus.dead'},
-    {value: 'unknown', label: 'characterStatus.unknown'},
-];
-
-export interface Relation {
-    name: string;
-    type: string;
-    description: string;
-    history: string;
-}
-
-export interface Attribute {
-    id: string;
-    name: string;
-}
-
-export interface CharacterAttribute {
-    [key: string]: Array<Attribute>;
-}
-
-export interface CharacterProps {
-    id: string | null;
-    name: string;
-    lastName: string;
-    nickname: string;
-    age: number | null;
-    gender: string;
-    species: string;
-    nationality: string;
-    status: 'alive' | 'dead' | 'unknown';
-    category: CharacterCategory;
-    title: string;
-    image: string;
-    physical: Attribute[];
-    psychological: Attribute[];
-    relations: Attribute[];
-    skills: Attribute[];
-    weaknesses: Attribute[];
-    strengths: Attribute[];
-    goals: Attribute[];
-    motivations: Attribute[];
-    arc: Attribute[];
-    secrets: Attribute[];
-    fears: Attribute[];
-    flaws: Attribute[];
-    beliefs: Attribute[];
-    conflicts: Attribute[];
-    quotes: Attribute[];
-    distinguishingMarks: Attribute[];
-    items: Attribute[];
-    affiliations: Attribute[];
-    role: string;
-    biography?: string;
-    history?: string;
-    speechPattern?: string;
-    catchphrase?: string;
-    residence?: string;
-    notes?: string;
-    color?: string;
-    seriesCharacterId?: string | null;
-}
-
-export interface CharacterListResponse {
-    characters: CharacterProps[];
-    enabled: boolean;
-}
-
-export interface CharacterElement {
-    title: string;
-    section: keyof CharacterProps;
-    placeholder: string;
-    icon: any; // Replace `any` with an appropriate type if you have a specific icon type.
-}
-
-// Attributs de base (toujours visibles)
-export const basicCharacterElements: CharacterElement[] = [
-    {
-        title: 'Descriptions physiques',
-        section: 'physical',
-        placeholder: 'Nouvelle Description Physique',
-        icon: faRuler,
-    },
-    {
-        title: 'Descriptions psychologiques',
-        section: 'psychological',
-        placeholder: 'Nouvelle Description Psychologique',
-        icon: faBrain,
-    },
-];
-
-// Attributs avancés (visibles en mode avancé)
-export const advancedCharacterElements: CharacterElement[] = [
-    {
-        title: 'Signes distinctifs',
-        section: 'distinguishingMarks',
-        placeholder: 'Nouveau signe distinctif',
-        icon: faFingerprint,
-    },
-    {
-        title: 'Arc du personnage',
-        section: 'arc',
-        placeholder: 'Nouvelle étape de l\'arc',
-        icon: faRoute,
-    },
-    {
-        title: 'Secrets',
-        section: 'secrets',
-        placeholder: 'Nouveau secret',
-        icon: faUserSecret,
-    },
-    {
-        title: 'Peurs',
-        section: 'fears',
-        placeholder: 'Nouvelle peur',
-        icon: faGhost,
-    },
-    {
-        title: 'Défauts',
-        section: 'flaws',
-        placeholder: 'Nouveau défaut',
-        icon: faHeartBroken,
-    },
-    {
-        title: 'Croyances',
-        section: 'beliefs',
-        placeholder: 'Nouvelle croyance',
-        icon: faHandHoldingHeart,
-    },
-    {
-        title: 'Conflits internes',
-        section: 'conflicts',
-        placeholder: 'Nouveau conflit',
-        icon: faBolt,
-    },
-    {
-        title: 'Citations',
-        section: 'quotes',
-        placeholder: 'Nouvelle citation',
-        icon: faQuoteLeft,
-    },
-    {
-        title: 'Relations',
-        section: 'relations',
-        placeholder: 'Nouveau Nom de Relation',
-        icon: faUsers,
-    },
-    {
-        title: 'Compétences',
-        section: 'skills',
-        placeholder: 'Nouvelle Compétence',
-        icon: faWrench,
-    },
-    {
-        title: 'Faiblesses',
-        section: 'weaknesses',
-        placeholder: 'Nouvelle Faiblesse',
-        icon: faExclamationTriangle,
-    },
-    {
-        title: 'Forces',
-        section: 'strengths',
-        placeholder: 'Nouvelle Force',
-        icon: faShieldAlt,
-    },
-    {
-        title: 'Objectifs',
-        section: 'goals',
-        placeholder: 'Nouvel Objectif',
-        icon: faBullseye,
-    },
-    {
-        title: 'Motivations',
-        section: 'motivations',
-        placeholder: 'Nouvelle Motivation',
-        icon: faFire,
-    },
-    {
-        title: 'Objets importants',
-        section: 'items',
-        placeholder: 'Nouvel objet',
-        icon: faBox,
-    },
-    {
-        title: 'Affiliations',
-        section: 'affiliations',
-        placeholder: 'Nouvelle affiliation',
-        icon: faPeopleGroup,
-    },
-];
-
-// Pour rétro-compatibilité, on garde characterElementCategory qui combine les deux
-export const characterElementCategory: CharacterElement[] = [
-    ...basicCharacterElements,
-    ...advancedCharacterElements,
-];
diff --git a/lib/models/Editor.ts b/lib/models/Editor.ts
deleted file mode 100755
index 416b417..0000000
--- a/lib/models/Editor.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import {IconDefinition} from "@fortawesome/free-solid-svg-icons";
-
-export interface PanelComponent {
-    id: number,
-    title: string,
-    badge: string,
-    description: string,
-    icon: IconDefinition,
-    action?: () => void,
-}
-
-export default class Editor {
-    public static convertToHtml(text: string): string {
-        return text
-            .split(/\n\s*\n/)
-            .map((paragraph: string): string => `<p>${paragraph.trim()}</p>`)
-            .join('');
-    }
-
-}
diff --git a/lib/models/QuillSense.ts b/lib/models/QuillSense.ts
deleted file mode 100644
index 5078d5b..0000000
--- a/lib/models/QuillSense.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import User, {Subscription} from "@/lib/models/User";
-import {SessionProps} from "@/lib/models/Session";
-
-export type MessageType = "user" | "model";
-export type QSView = 'list' | 'chat' | 'ghostwritter' | 'dictionary' | 'synonyms' | 'conjugator' | 'inspiration'
-export type ConversationType = 'dictionary' | 'synonyms' | 'conjugator' | 'chatbot' | 'inspire';
-
-export interface Message {
-    id: number;
-    type: MessageType;
-    message: string;
-    date: string;
-}
-
-export interface Conversation {
-    id: string;
-    title?: string;
-    date?: string;
-    type?: ConversationType;
-    messages: Message[];
-    status: number;
-    totalPrice?: number
-    useYourKey?: boolean;
-}
-
-export interface AIGeneratedText {
-    totalTokens: number;
-    totalPrice: number;
-    response: string;
-}
-
-export interface AIResponseWithCredits<T> {
-    useYourKey: boolean;
-    totalPrice: number;
-    data: T;
-}
-
-export interface AIDictionary extends AIResponseWithCredits<DictionaryAIResponse> {
-}
-
-export interface AIGeneratedTextData {
-    totalCost: number;
-    response: string;
-}
-
-export interface AIGeneratedText extends AIResponseWithCredits<AIGeneratedTextData> {
-}
-
-export interface AIInspire extends AIResponseWithCredits<InspireAIResponse> {
-}
-
-export interface AISynonyms extends AIResponseWithCredits<SynonymsAIResponse> {
-}
-
-export interface AIVerbConjugation extends AIResponseWithCredits<unknown> {
-}
-
-interface InspireAIResponse {
-    ideas: {
-        idea: string,
-        reason: string;
-        relatedTo: string;
-    }[]
-}
-
-export interface DictionaryAIResponse {
-    word: string;
-    definition: string;
-    example: string;
-    literaryUsage: string
-}
-
-export interface SynonymAI {
-    word: string;
-    context: string;
-}
-
-export interface SynonymsAIResponse {
-    words: SynonymAI[];
-}
-
-export interface InspirationAIIdea {
-    idea: string;
-    reason: string;
-    relatedTo: string;
-}
-
-export interface ConversationProps {
-    id: string;
-    mode: string;
-    title: string;
-    startDate: string;
-    status: number;
-}
-
-export default class QuillSense {
-    static getSubLevel(session: SessionProps): number {
-        let currentSub: Subscription | null = User.getCurrentSubscription(session?.user, 'quill-sense');
-        if (!currentSub) {
-            currentSub = User.getCurrentSubscription(session?.user, 'quill-trial');
-            if (!currentSub) {
-                return 0;
-            }
-        }
-        switch (currentSub?.subTier) {
-            case 1:
-                return 1;
-            case 2:
-                return 2;
-            case 3:
-                return 3;
-            default:
-                return 0;
-        }
-    };
-    
-    static isBringYourKeys(session: SessionProps): boolean {
-        if (!session?.user) return false;
-        const currentSub: Subscription | null = User.getCurrentSubscription(session?.user, 'use-your-keys');
-        return currentSub?.status || session.user.groupId <= 4;
-    }
-    
-    static isGeminiEnabled(session: SessionProps): boolean {
-        return session.user?.apiKeys.gemini || false;
-    }
-    
-    static isAnthropicEnabled(session: SessionProps): boolean {
-        return session.user?.apiKeys.anthropic || false;
-    }
-    
-    static isOpenAIEnabled(session: SessionProps): boolean {
-        return session.user?.apiKeys.openai || false;
-    }
-}
diff --git a/lib/models/QuillSenseSettings.ts b/lib/models/QuillSenseSettings.ts
deleted file mode 100644
index dcf3e51..0000000
--- a/lib/models/QuillSenseSettings.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface QuillSenseSettingsProps {
-    quillsenseEnabled: boolean;
-    advancedPrompt: string | null;
-}
diff --git a/lib/models/Session.ts b/lib/models/Session.ts
deleted file mode 100755
index 172bc98..0000000
--- a/lib/models/Session.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {UserProps} from "@/lib/models/User";
-
-export interface SessionProps {
-    isConnected: boolean,
-    accessToken: string;
-    user: UserProps | null;
-}
-
-export interface LoginResponse {
-    valid: boolean,
-    message?: string,
-    token?: string,
-    userid?: string
-}
-
-export default class Session {
-    constructor() {
-    }
-}
diff --git a/lib/models/Spell.ts b/lib/models/Spell.ts
deleted file mode 100644
index 448a5b3..0000000
--- a/lib/models/Spell.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import {SelectBoxProps} from "@/shared/interface";
-
-// ==================== SPELL TAG INTERFACES ====================
-
-export interface SpellTagProps {
-    id: string;
-    name: string;
-    color: string | null;
-}
-
-// ==================== SPELL INTERFACES ====================
-
-// Réponse de GET /spell/detail et POST /spell/add
-export interface SpellProps {
-    id: string;
-    name: string;
-    description: string;
-    appearance: string;
-    tags: string[];  // IDs des tags
-    powerLevel: string | null;
-    components: string | null;
-    limitations: string | null;
-    notes: string | null;
-    seriesSpellId?: string | null;
-}
-
-// Pour POST /spell/add et PUT /spell/update
-export interface SpellPropsPost {
-    id?: string;
-    name: string;
-    description: string;
-    appearance: string;
-    tags: string[];
-    powerLevel?: string | null;
-    components?: string | null;
-    limitations?: string | null;
-    notes?: string | null;
-    seriesSpellId?: string | null;
-}
-
-// Item dans la liste (GET /spell/list)
-export interface SpellListItem {
-    id: string;
-    name: string;
-    description: string;
-    tags: SpellTagProps[];  // Tags résolus (pas les IDs)
-    seriesSpellId?: string | null;
-}
-
-// Réponse de GET /spell/list
-export interface SpellListResponse {
-    enabled: boolean;
-    spells: SpellListItem[];
-    tags: SpellTagProps[];
-}
-
-// État local pour l'édition (avec id nullable pour création)
-export interface SpellEditState {
-    id: string | null;
-    name: string;
-    description: string;
-    appearance: string;
-    tags: string[];
-    powerLevel: string | null;
-    components: string | null;
-    limitations: string | null;
-    notes: string | null;
-    seriesSpellId?: string | null;
-}
-
-export const initialSpellState: SpellEditState = {
-    id: null,
-    name: '',
-    description: '',
-    appearance: '',
-    tags: [],
-    powerLevel: null,
-    components: null,
-    limitations: null,
-    notes: null,
-    seriesSpellId: null,
-};
-
-export const spellPowerLevels: SelectBoxProps[] = [
-    {value: 'none', label: 'spellPowerLevels.none'},
-    {value: 'cantrip', label: 'spellPowerLevels.cantrip'},
-    {value: 'novice', label: 'spellPowerLevels.novice'},
-    {value: 'apprentice', label: 'spellPowerLevels.apprentice'},
-    {value: 'journeyman', label: 'spellPowerLevels.journeyman'},
-    {value: 'expert', label: 'spellPowerLevels.expert'},
-    {value: 'master', label: 'spellPowerLevels.master'},
-    {value: 'grandmaster', label: 'spellPowerLevels.grandmaster'},
-    {value: 'legendary', label: 'spellPowerLevels.legendary'},
-    {value: 'divine', label: 'spellPowerLevels.divine'},
-];
-
-export const defaultTagColors: string[] = [
-    '#51AE84',
-    '#3A8B69',
-    '#2196F3',
-    '#1976D2',
-    '#FFA726',
-    '#FF9800',
-    '#EF5350',
-    '#E53935',
-    '#AB47BC',
-    '#9C27B0',
-    '#26A69A',
-    '#00897B',
-    '#5C6BC0',
-    '#3F51B5',
-    '#EC407A',
-    '#D81B60',
-];
diff --git a/lib/models/Story.ts b/lib/models/Story.ts
deleted file mode 100755
index 75ae032..0000000
--- a/lib/models/Story.ts
+++ /dev/null
@@ -1,1116 +0,0 @@
-import {ChapterListProps} from "./Chapter";
-import {Act, Issue} from "@/lib/models/Book";
-import {RadioBoxValue} from "@/components/form/RadioBox";
-import {Dispatch, SetStateAction} from "react";
-import {SelectBoxProps} from "@/shared/interface";
-
-export interface StoryProps {
-    mainChapter: ChapterListProps[],
-    acts: Act[],
-    issues: Issue[]
-}
-
-export interface VerbalTimeProps {
-    actions: string;
-    descriptions: string;
-    dialogues: string;
-    thoughts: string;
-    summary: string;
-}
-
-export interface DialogueProps {
-    description: string;
-    example: string;
-}
-
-export interface GeneratedShortStory {
-    title: string;
-    short: string;
-    resume: string;
-    totalPrice: number;
-    totalTokens: number;
-}
-
-export const storyStates: RadioBoxValue[] = [
-    {label: 'Suite', value: 0},
-    {label: 'Début', value: 1},
-    {label: 'Fin', value: 2},
-    {label: 'Introduction', value: 3},
-    {label: 'Final', value: 4},
-];
-
-export const beginnerPredefinedType: SelectBoxProps[] = [
-    {
-        label: `Thème défini disponible.`,
-        value: '0',
-    },
-    {
-        label: `Féerique`,
-        value: '3',
-    },
-    {
-        label: 'Romance historique',
-        value: '10',
-    },
-    {
-        label: 'Conte de fées moderne',
-        value: '13',
-    },
-    {
-        label: 'Romance contemporaine',
-        value: '17',
-    },
-    {
-        label: 'Conte moral',
-        value: '20',
-    },
-];
-export const intermediatePredefinedType: SelectBoxProps[] = [
-    {
-        label: `Thème défini disponible.`,
-        value: '0',
-    },
-    {
-        label: `Histoire d'horreur jeune adulte`,
-        value: '1',
-    },
-    {
-        label: 'Féerique',
-        value: '3',
-    },
-    {
-        label: 'Romance dramatique',
-        value: '5',
-    },
-    {
-        label: 'Fantastique sombre',
-        value: '9',
-    },
-    {
-        label: 'Romance historique',
-        value: '10',
-    },
-    {
-        label: 'Science-fiction utopique',
-        value: '12',
-    },
-    {
-        label: 'Conte de fées moderne',
-        value: '13',
-    },
-    {
-        label: 'Drame familial',
-        value: '14',
-    },
-    {
-        label: 'Romance contemporaine',
-        value: '17',
-    },
-    {
-        label: 'Science-fiction post-apocalyptique',
-        value: '19',
-    },
-    {
-        label: 'Conte moral',
-        value: '20',
-    },
-];
-
-export const advancedPredefinedType: SelectBoxProps[] = [
-    {
-        label: `Thème défini disponible.`,
-        value: '0',
-    },
-    {
-        label: `Histoire d'horreur jeune adulte`,
-        value: '1',
-    },
-    {
-        label: `Horreur adulte`,
-        value: '2',
-    },
-    {
-        label: 'Féerique',
-        value: '3',
-    },
-    {
-        label: 'Science-fiction dystopique',
-        value: '4',
-    },
-    {
-        label: 'Romance dramatique',
-        value: '5',
-    },
-    {
-        label: 'Aventure épique',
-        value: '6',
-    },
-    {
-        label: 'Conte philosophique',
-        value: '7',
-    },
-    {
-        label: 'Thriller psychologique',
-        value: '8',
-    },
-    {
-        label: 'Fantastique sombre',
-        value: '9',
-    },
-    {
-        label: 'Romance historique',
-        value: '10',
-    },
-    {
-        label: 'Polar noir',
-        value: '11',
-    },
-    {
-        label: 'Science-fiction utopique',
-        value: '12',
-    },
-    {
-        label: 'Conte de fées moderne',
-        value: '13',
-    },
-    {
-        label: 'Drame familial',
-        value: '14',
-    },
-    {
-        label: 'Aventure maritime',
-        value: '15',
-    },
-    {
-        label: 'Fantaisie épique',
-        value: '16',
-    },
-    {
-        label: 'Romance contemporaine',
-        value: '17',
-    },
-    {
-        label: "Thriller d'espionnage",
-        value: '18',
-    },
-    {
-        label: 'Science-fiction post-apocalyptique',
-        value: '19',
-    },
-    {
-        label: 'Conte moral',
-        value: '20',
-    },
-];
-
-// Débutant (Level 1)
-export const beginnerNarrativePersons: SelectBoxProps[] = [
-    {
-        label: 'Sélectionner un type narrative.',
-        value: '0',
-    },
-    {
-        label: 'Première personne (Je acteur) - Implication émotionnelle',
-        value: '1',
-    },
-    {
-        label: 'Troisième omnisciente - Narration divine, savoir total',
-        value: '3',
-    },
-];
-
-// Intermédiaire (Level 2)
-export const intermediateNarrativePersons: SelectBoxProps[] = [
-    {
-        label: 'Sélectionner un type narrative.',
-        value: '0',
-    },
-    {
-        label: 'Première personne (Je acteur) - Implication émotionnelle',
-        value: '1',
-    },
-    {
-        label: 'Première personne (Je témoin) - Observation extérieure',
-        value: '2',
-    },
-    {
-        label: 'Troisième omnisciente - Narration divine, savoir total',
-        value: '3',
-    },
-    {
-        label: 'Troisième limitée - Focus sur 1 personnage',
-        value: '4',
-    },
-];
-
-// Avancé (Level 3)
-export const advancedNarrativePersons: SelectBoxProps[] = [
-    {
-        label: 'Sélectionner un type narrative.',
-        value: '0',
-    },
-    {
-        label: 'Première personne (Je acteur) - Implication émotionnelle',
-        value: '1',
-    },
-    {
-        label: 'Première personne (Je témoin) - Observation extérieure',
-        value: '2',
-    },
-    {
-        label: 'Troisième omnisciente - Narration divine, savoir total',
-        value: '3',
-    },
-    {
-        label: 'Troisième limitée - Focus sur 1 personnage',
-        value: '4',
-    },
-    {
-        label: 'Deuxième personne (Tu) - Immersion/confrontation',
-        value: '5',
-    },
-    {
-        label: 'Nous collectif - Voix chorale, destin partagé',
-        value: '6',
-    },
-];
-
-export const langues: SelectBoxProps[] = [
-    {label: 'Sélectionner une langue.', value: '0'},
-    {label: 'Français Canada', value: '1'},
-    {label: 'Français France', value: '2'},
-    {label: 'Français Québécois', value: '3'},
-    {label: 'English Canada', value: '4'},
-];
-
-// Débutant (Level 1)
-export const beginnerDialogueTypes: SelectBoxProps[] = [
-    {
-        label: 'Sélectionner un type de dialogue.',
-        value: '0',
-    },
-    {
-        label: 'Dialogue direct - Paroles exactes des personnages',
-        value: '1',
-    },
-    {
-        label: 'Dialogue indirect - Paroles résumées par le narrateur',
-        value: '2',
-    },
-];
-
-// Intermédiaire (Level 2)
-export const intermediateDialogueTypes: SelectBoxProps[] = [
-    {
-        label: 'Sélectionner un type de dialogue.',
-        value: '0',
-    },
-    {
-        label: 'Dialogue direct - Paroles exactes des personnages',
-        value: '1',
-    },
-    {
-        label: 'Dialogue indirect - Paroles résumées par le narrateur',
-        value: '2',
-    },
-    {
-        label: 'Dialogue mixte - Mélange de dialogue direct et indirect',
-        value: '3',
-    },
-];
-
-// Avancé (Level 3)
-export const advancedDialogueTypes: SelectBoxProps[] = [
-    {
-        label: 'Sélectionner un type de dialogue.',
-        value: '0',
-    },
-    {
-        label: 'Dialogue direct - Paroles exactes des personnages',
-        value: '1',
-    },
-    {
-        label: 'Dialogue indirect - Paroles résumées par le narrateur',
-        value: '2',
-    },
-    {
-        label: 'Dialogue mixte - Mélange de dialogue direct et indirect',
-        value: '3',
-    },
-    {
-        label: 'Monologue intérieur - Interaction avec soi-même',
-        value: '4',
-    },
-];
-
-export const verbalTime: SelectBoxProps[] = [
-    {
-        label: 'Sélectionner un temps verbal.',
-        value: '0',
-    },
-    {
-        label: 'Passé Simple',
-        value: '1',
-    },
-    {
-        label: 'Passé Immédiat → Témoignages, récits autobiographiques',
-        value: '2',
-    },
-    {label: 'Passé Profond → Flashbacks littéraires, tragédies', value: '3'},
-    {label: 'Présent Brut → Urgence, immersion totale', value: '4'},
-    {label: 'Présent Réflexif → Méditations philosophiques', value: '5'},
-    {label: 'Futur Projeté → Prophéties, plans stratégiques', value: '6'},
-    {
-        label: 'Futur Catastrophe → Dystopies, récits post-apocalyptiques',
-        value: '7',
-    },
-    {label: 'Imparfait Onirique → Rêves, souvenirs déformés', value: '8'},
-    {
-        label: 'Conditionnel Hypothétique → Uchronies, réalités alternatives',
-        value: '9',
-    },
-    {
-        label: 'Subjonctif Angoissé → Drames psychologiques, dilemmes',
-        value: '10',
-    },
-    {
-        label: 'Mélancolie Composée → Regrets, introspection nostalgique',
-        value: '11',
-    },
-    {label: 'Urgence Narrative → Urgences', value: '12'},
-    {label: 'Présent Émotionnel → Émotions intenses', value: '13'},
-    {
-        label: 'Présent Introspectif → Réflexions profondes',
-        value: '14',
-    },
-    {
-        label: 'Présent Historique → Histoires historiques',
-        value: '15',
-    },
-    {
-        label: 'Passé Réflexif → Récits introspectifs',
-        value: '16',
-    },
-    {
-        label: 'Futur Prophétique → Prophéties, visions apocalyptiques',
-        value: '17',
-    },
-    {
-        label: 'Conditionnel Visionnaire → Mondes parallèles',
-        value: '18',
-    },
-    {
-        label: 'Imparfait Poétique → Lyrisme, poésie narrative',
-        value: '19',
-    },
-    {
-        label: 'Second Person Narrative → Immersion totale',
-        value: '20',
-    },
-];
-
-export default class Story {
-    constructor() {
-    }
-
-    static getVerbesStyle(
-        verbalTimeValue: number,
-        level: number,
-    ): VerbalTimeProps {
-        switch (verbalTimeValue) {
-            case 1: // Passé Simple
-                return {
-                    actions: level === 1 ? 'Passé composé' : 'Passé simple',
-                    descriptions: 'Imparfait',
-                    dialogues: 'Passé composé',
-                    thoughts: level === 3 ? 'Subjonctif imparfait' : 'Plus-que-parfait',
-                    summary: '→ Narrations épurées, style classique',
-                };
-
-            case 2: // Passé Immédiat
-                return {
-                    actions: 'Passé composé',
-                    descriptions:
-                        level === 1
-                            ? 'Imparfait'
-                            : level === 2
-                                ? 'Imparfait + infinitifs'
-                                : 'Conditionnel présent',
-                    dialogues:
-                        level === 1
-                            ? 'Présent'
-                            : level === 2
-                                ? 'Présent + impératif'
-                                : 'Impératif',
-                    thoughts:
-                        level === 1
-                            ? 'Futur proche'
-                            : level === 2
-                                ? 'Conditionnel présent'
-                                : 'Subjonctif présent',
-                    summary: '→ Témoignages, récits autobiographiques',
-                };
-
-            case 3: // Passé Profond
-                return {
-                    actions: level === 1 ? 'Plus-que-parfait' : 'Passé antérieur',
-                    descriptions:
-                        level === 1
-                            ? 'Imparfait'
-                            : level === 2
-                                ? 'Plus-que-parfait'
-                                : 'Conditionnel passé',
-                    dialogues: level === 3 ? 'Passé antérieur' : 'Passé simple', // <--- CORRIGÉ
-                    thoughts: level === 1 ? 'Plus-que-parfait' : 'Subjonctif imparfait',
-                    summary: '→ Flashbacks littéraires, tragédies',
-                };
-
-            case 4: // Présent Brut
-                return {
-                    actions:
-                        level === 1
-                            ? 'Présent simple'
-                            : level === 2
-                                ? 'Présent'
-                                : 'Présent + participe présent',
-                    descriptions:
-                        level === 1
-                            ? 'Participe présent'
-                            : level === 2
-                                ? 'Participe présent + infinitifs'
-                                : 'Participes présents enchaînés',
-                    dialogues:
-                        level === 1
-                            ? 'Présent'
-                            : level === 2
-                                ? 'Impératif'
-                                : 'Impératif + infinitifs',
-                    thoughts:
-                        level === 1
-                            ? 'Futur proche'
-                            : level === 2
-                                ? 'Futur simple'
-                                : 'Futur antérieur',
-                    summary: '→ Urgence, immersion totale',
-                };
-
-            case 5: // Présent Réflexif
-                return {
-                    actions: 'Présent',
-                    descriptions:
-                        level === 1
-                            ? 'Gérondif'
-                            : level === 2
-                                ? 'Gérondif + infinitifs'
-                                : 'Gérondif + conditionnel',
-                    dialogues:
-                        level === 1
-                            ? 'Présent'
-                            : level === 2
-                                ? 'Conditionnel présent'
-                                : 'Infinitif',
-                    thoughts: level === 1 ? 'Infinitif' : 'Infinitif passé',
-                    summary: '→ Méditations philosophiques',
-                };
-
-            case 13: // Présent Émotionnel
-                return {
-                    actions:
-                        level === 1
-                            ? 'Présent simple'
-                            : level === 2
-                                ? 'Présent + participe présent'
-                                : 'Participes présents enchaînés',
-                    descriptions:
-                        level === 1
-                            ? 'Imparfait'
-                            : level === 2
-                                ? 'Participe présent + adjectifs'
-                                : 'Subjonctif présent',
-                    dialogues:
-                        level === 1
-                            ? 'Présent'
-                            : level === 2
-                                ? 'Conditionnel présent'
-                                : 'Subjonctif présent',
-                    thoughts:
-                        level === 1
-                            ? 'Infinitif'
-                            : level === 2
-                                ? 'Infinitif passé'
-                                : 'Subjonctif imparfait',
-                    summary:
-                        '→ Émotions intenses, introspections vives (romances, drames psychologiques)',
-                };
-
-            case 14: // Présent Introspectif
-                return {
-                    actions: 'Présent',
-                    descriptions:
-                        level === 1
-                            ? 'Gérondif'
-                            : level === 2
-                                ? 'Gérondif + infinitifs'
-                                : 'Conditionnel présent',
-                    dialogues:
-                        level === 1 ? 'Présent' : level === 2 ? 'Impératif' : 'Infinitif',
-                    thoughts:
-                        level === 1
-                            ? 'Infinitif'
-                            : level === 2
-                                ? 'Infinitif passé'
-                                : 'Subjonctif imparfait',
-                    summary:
-                        '→ Réflexions profondes, analyse des émotions (nouvelles philosophiques, récits introspectifs)',
-                };
-
-            case 15: // Présent Historique
-                return {
-                    actions:
-                        level === 1
-                            ? 'Présent simple'
-                            : level === 2
-                                ? 'Présent + passé simple'
-                                : 'Présent + passé antérieur',
-                    descriptions:
-                        level === 1
-                            ? 'Imparfait'
-                            : level === 2
-                                ? 'Passé composé'
-                                : 'Conditionnel passé',
-                    dialogues:
-                        level === 1
-                            ? 'Présent'
-                            : level === 2
-                                ? 'Passé simple'
-                                : 'Futur antérieur',
-                    thoughts:
-                        level === 1
-                            ? 'Infinitif'
-                            : level === 2
-                                ? 'Plus-que-parfait'
-                                : 'Subjonctif imparfait',
-                    summary:
-                        '→ Histoires historiques avec une intensité immédiate (batailles, moments décisifs)',
-                };
-
-            case 6: // Futur Projeté
-                return {
-                    actions: level === 1 ? 'Futur simple' : 'Futur antérieur',
-                    descriptions:
-                        level === 1
-                            ? 'Futur proche'
-                            : level === 2
-                                ? 'Futur antérieur'
-                                : 'Futur antérieur',
-                    dialogues: level === 1 ? 'Futur simple' : 'Futur proche',
-                    thoughts: level === 1 ? 'Futur proche' : 'Futur antérieur',
-                    summary: '→ Prophéties, plans stratégiques',
-                };
-
-            case 7: // Futur Catastrophe
-                return {
-                    actions: level === 1 ? 'Futur simple' : 'Futur antérieur',
-                    descriptions:
-                        level === 1
-                            ? 'Futur proche'
-                            : level === 2
-                                ? 'Futur simple + conditionnel'
-                                : 'Conditionnel passé',
-                    dialogues:
-                        level === 1
-                            ? 'Futur proche'
-                            : level === 2
-                                ? 'Futur antérieur'
-                                : 'Futur simple',
-                    thoughts:
-                        level === 1
-                            ? 'Futur simple'
-                            : level === 2
-                                ? 'Conditionnel passé'
-                                : 'Futur antérieur',
-                    summary: '→ Dystopies, récits post-apocalyptiques',
-                };
-
-            case 8: // Imparfait Onirique
-                return {
-                    actions: 'Imparfait',
-                    descriptions:
-                        level === 1
-                            ? 'Imparfait'
-                            : level === 2
-                                ? 'Conditionnel présent'
-                                : 'Conditionnel passé',
-                    dialogues:
-                        level === 1 ? 'Présent' : level === 2 ? 'Infinitif' : 'Infinitifs',
-                    thoughts:
-                        level === 1
-                            ? 'Subjonctif présent'
-                            : level === 2
-                                ? 'Subjonctif imparfait'
-                                : 'Subjonctif imparfait',
-                    summary: '→ Rêves, souvenirs déformés',
-                };
-
-            case 9: // Conditionnel Hypothétique
-                return {
-                    actions: 'Conditionnel présent',
-                    descriptions: 'Conditionnel passé',
-                    dialogues:
-                        level === 1 ? 'Subjonctif imparfait' : 'Subjonctif imparfait', // <--- MÊME POUR TOUTES LES NIVEAUX
-                    thoughts: level === 3 ? 'Subjonctif imparfait' : 'Plus-que-parfait', // <--- AJOUTÉ
-                    summary: '→ Uchronies, réalités alternatives',
-                };
-
-            case 10: // Subjonctif Angoissé
-                return {
-                    actions: level === 1 ? 'Subjonctif présent' : 'Subjonctif imparfait',
-                    descriptions:
-                        level === 1 ? 'Subjonctif présent' : 'Subjonctif imparfait',
-                    dialogues: 'Impératif',
-                    thoughts: level === 3 ? 'Subjonctif imparfait' : 'Conditionnel passé', // <--- AJOUTÉ
-                    summary: '→ Drames psychologiques, dilemmes',
-                };
-
-            case 11: // Mélancolie Composée
-                return {
-                    actions: 'Passé composé',
-                    descriptions: 'Imparfait',
-                    dialogues: 'Plus-que-parfait',
-                    thoughts: 'Infinitif passé',
-                    summary: '→ Regrets, introspection nostalgique',
-                };
-
-            case 12: // Urgence Narrative
-                return {
-                    actions: 'Présent',
-                    descriptions:
-                        level === 1 ? 'Passé composé' : 'Passé composé + futur antérieur', // <--- AJOUTÉ
-                    dialogues: level === 1 ? 'Futur proche' : 'Futur antérieur',
-                    thoughts: 'Participe présent',
-                    summary: '→ Crise en cours, compte à rebours',
-                };
-
-            case 16: // Passé Réflexif
-                return {
-                    actions:
-                        level === 1
-                            ? 'Passé composé'
-                            : level === 2
-                                ? 'Imparfait + passé simple'
-                                : 'Plus-que-parfait',
-                    descriptions:
-                        level === 1
-                            ? 'Imparfait'
-                            : level === 2
-                                ? 'Participe passé'
-                                : 'Conditionnel passé',
-                    dialogues:
-                        level === 1
-                            ? 'Présent'
-                            : level === 2
-                                ? 'Imparfait'
-                                : 'Subjonctif imparfait',
-                    thoughts:
-                        level === 1
-                            ? 'Infinitif'
-                            : level === 2
-                                ? 'Infinitif passé'
-                                : 'Subjonctif présent',
-                    summary:
-                        '→ Récits introspectifs, auto-analyse (autofictions, récits de croissance personnelle)',
-                };
-
-            case 17: // Futur Prophétique
-                return {
-                    actions:
-                        level === 1
-                            ? 'Futur simple'
-                            : level === 2
-                                ? 'Futur antérieur'
-                                : 'Conditionnel passé',
-                    descriptions:
-                        level === 1
-                            ? 'Futur proche'
-                            : level === 2
-                                ? 'Futur antérieur'
-                                : 'Conditionnel présent',
-                    dialogues:
-                        level === 1
-                            ? 'Futur simple'
-                            : level === 2
-                                ? 'Futur antérieur'
-                                : 'Subjonctif présent',
-                    thoughts:
-                        level === 1
-                            ? 'Infinitif'
-                            : level === 2
-                                ? 'Futur antérieur'
-                                : 'Conditionnel passé',
-                    summary:
-                        '→ Prophéties, visions apocalyptiques (récits mystiques, romans de science-fiction)',
-                };
-
-            case 18: // Conditionnel Visionnaire
-                return {
-                    actions:
-                        level === 1
-                            ? 'Conditionnel présent'
-                            : level === 2
-                                ? 'Conditionnel passé'
-                                : 'Subjonctif imparfait',
-                    descriptions:
-                        level === 1
-                            ? 'Conditionnel présent'
-                            : level === 2
-                                ? 'Conditionnel passé'
-                                : 'Subjonctif présent',
-                    dialogues:
-                        level === 1
-                            ? 'Conditionnel présent'
-                            : level === 2
-                                ? 'Subjonctif imparfait'
-                                : 'Impératif',
-                    thoughts:
-                        level === 1
-                            ? 'Infinitif'
-                            : level === 2
-                                ? 'Infinitif passé'
-                                : 'Subjonctif imparfait',
-                    summary:
-                        '→ Mondes parallèles, uchronies (romans alternatifs, récits de fantasy)',
-                };
-
-            case 19: // Imparfait Poétique
-                return {
-                    actions:
-                        level === 1
-                            ? 'Imparfait'
-                            : level === 2
-                                ? 'Imparfait + participe présent'
-                                : 'Participes présents enchaînés',
-                    descriptions:
-                        level === 1
-                            ? 'Imparfait'
-                            : level === 2
-                                ? 'Participe présent + adjectifs'
-                                : 'Subjonctif présent',
-                    dialogues:
-                        level === 1
-                            ? 'Présent'
-                            : level === 2
-                                ? 'Imparfait'
-                                : 'Subjonctif imparfait',
-                    thoughts:
-                        level === 1
-                            ? 'Infinitif'
-                            : level === 2
-                                ? 'Infinitif passé'
-                                : 'Subjonctif présent',
-                    summary:
-                        '→ Lyrisme, poésie narrative (récits oniriques, nouvelles littéraires)',
-                };
-
-            case 20: // Second Person Narrative
-                return {
-                    actions:
-                        level === 1
-                            ? 'Présent simple'
-                            : level === 2
-                                ? 'Imparfait'
-                                : 'Futur simple',
-                    descriptions:
-                        level === 1
-                            ? 'Imparfait'
-                            : level === 2
-                                ? 'Participe présent'
-                                : 'Conditionnel présent',
-                    dialogues:
-                        level === 1
-                            ? 'Présent'
-                            : level === 2
-                                ? 'Imparfait'
-                                : 'Futur proche',
-                    thoughts:
-                        level === 1
-                            ? 'Infinitif'
-                            : level === 2
-                                ? 'Plus-que-parfait'
-                                : 'Subjonctif présent',
-                    summary:
-                        '→ Immersion totale (récits interactifs, jeux de rôle, romans à choix multiples)',
-                };
-
-            default:
-                return {
-                    actions: 'Passé simple',
-                    descriptions: 'Imparfait',
-                    dialogues: 'Passé composé',
-                    thoughts: 'Plus-que-parfait',
-                    summary: '→ Narrations épurées, style classique',
-                };
-        }
-    }
-
-    static presetStoryType(
-        presetType: string,
-        setTone: Dispatch<SetStateAction<string>>,
-        setAtmosphere: Dispatch<SetStateAction<string>>,
-        setVerbTense: Dispatch<SetStateAction<string>>,
-        setPerson: Dispatch<SetStateAction<string>>,
-        setDialogueType: Dispatch<SetStateAction<string>>,
-        setIsExplicit: Dispatch<SetStateAction<boolean>>,
-    ): void {
-        switch (presetType) {
-            case '1':
-                setTone('Suspense angoissant, mystère troublant');
-                setAtmosphere('Tension oppressante, ombres menaçantes');
-                setVerbTense('3');
-                setPerson('1');
-                setDialogueType('3');
-                setIsExplicit(false);
-                break;
-            case '2':
-                setTone('Brutalité crue, terreur psychologique');
-                setAtmosphere('Claustrophobie, clair-obscur sinistre');
-                setVerbTense('10');
-                setPerson('4');
-                setDialogueType('4');
-                setIsExplicit(true);
-                break;
-            case '3':
-                setTone('Magie envoûtante, innocence poétique');
-                setAtmosphere('Forêt luminescente, brume enchantée');
-                setVerbTense('19');
-                setPerson('3');
-                setDialogueType('1');
-                setIsExplicit(false);
-                break;
-            case '4':
-                setTone('Froidure technologique, désespoir systémique');
-                setAtmosphere('Métal rouillé, lumières néon vacillantes');
-                setVerbTense('7');
-                setPerson('5');
-                setDialogueType('3');
-                setIsExplicit(false);
-                break;
-            case '5':
-                setTone('Passion tourmentée, mélancolie sensuelle');
-                setAtmosphere('Pluie fine, chambres aux rideaux lourds');
-                setVerbTense('13');
-                setPerson('1');
-                setDialogueType('1');
-                setIsExplicit(true);
-                break;
-            case '6':
-                setTone('Héroïsme grandiose, dangers exaltants');
-                setAtmosphere('Vastes paysages, ruines anciennes');
-                setVerbTense('4');
-                setPerson('6');
-                setDialogueType('3');
-                setIsExplicit(false);
-                break;
-            case '7':
-                setTone('Méditation existentielle, questions sans réponses');
-                setAtmosphere('Bibliothèque poussiéreuse, nuit silencieuse');
-                setVerbTense('5');
-                setPerson('5');
-                setDialogueType('4');
-                setIsExplicit(true);
-                break;
-            case '8':
-                setTone('Tension psychologique, suspense mental');
-                setAtmosphere('Isolation, paranoïa croissante');
-                setVerbTense('10');
-                setPerson('4');
-                setDialogueType('4');
-                setIsExplicit(true);
-                break;
-            case '9':
-                setTone('Mystère obscur, surnaturel inquiétant');
-                setAtmosphere('Forêts sombres, créatures cachées');
-                setVerbTense('3');
-                setPerson('1');
-                setDialogueType('3');
-                setIsExplicit(false);
-                break;
-            case '10':
-                setTone('Amour interdit, passion à travers les âges');
-                setAtmosphere('Châteaux majestueux, bals somptueux');
-                setVerbTense('1');
-                setPerson('3');
-                setDialogueType('1');
-                setIsExplicit(true);
-                break;
-            case '11':
-                setTone('Dure réalité, enquête sombre');
-                setAtmosphere('Rues sombres, ambiance de crime');
-                setVerbTense('16');
-                setPerson('5');
-                setDialogueType('4');
-                setIsExplicit(true);
-                break;
-            case '12':
-                setTone('Espoir futuriste, société idéale');
-                setAtmosphere('Villes lumineuses, technologie avancée');
-                setVerbTense('6');
-                setPerson('4');
-                setDialogueType('3');
-                setIsExplicit(false);
-                break;
-            case '13':
-                setTone('Magie contemporaine, réalisme enchanté');
-                setAtmosphere('Ville moderne, éléments féeriques');
-                setVerbTense('4');
-                setPerson('1');
-                setDialogueType('1');
-                setIsExplicit(true);
-                break;
-            case '14':
-                setTone('Conflits émotionnels, relations complexes');
-                setAtmosphere('Intérieur chaleureux, tensions sous-jacentes');
-                setVerbTense('13');
-                setPerson('1');
-                setDialogueType('1');
-                setIsExplicit(true);
-                break;
-            case '15':
-                setTone('Exploration audacieuse, dangers marins');
-                setAtmosphere('Océan infini, navires anciens');
-                setVerbTense('4');
-                setPerson('6');
-                setDialogueType('3');
-                setIsExplicit(false);
-                break;
-            case '16':
-                setTone('Quête héroïque, magie puissante');
-                setAtmosphere('Mondes imaginaires, créatures mythiques');
-                setVerbTense('19');
-                setPerson('3');
-                setDialogueType('1');
-                setIsExplicit(true);
-                break;
-            case '17':
-                setTone('Amour moderne, relations actuelles');
-                setAtmosphere('Ville animée, cafés cosy');
-                setVerbTense('13');
-                setPerson('1');
-                setDialogueType('1');
-                setIsExplicit(true);
-                break;
-            case '18':
-                setTone("Intrigue internationale, secrets d'État");
-                setAtmosphere('Villes étrangères, tensions diplomatiques');
-                setVerbTense('16');
-                setPerson('5');
-                setDialogueType('4');
-                setIsExplicit(true);
-                break;
-            case '19':
-                setTone('Survie désespérée, monde en ruines');
-                setAtmosphere('Paysages dévastés, ressources rares');
-                setVerbTense('7');
-                setPerson('4');
-                setDialogueType('3');
-                setIsExplicit(false);
-                break;
-            case '20':
-                setTone('Leçons de vie, valeurs profondes');
-                setAtmosphere('Village paisible, nature environnante');
-                setVerbTense('1');
-                setPerson('3');
-                setDialogueType('1');
-                setIsExplicit(true);
-                break;
-        }
-    }
-
-    static getNarrativePerson(value: number, level: number): string {
-        if (level === 1 /* Débutant */) {
-            // Options simples et courantes
-            switch (value) {
-                case 1:
-                    return 'Première personne (Je acteur) - Parfait pour les débuts (ex: Je marchais)';
-                case 3:
-                    return 'Troisième omnisciente - Narration globale (ex: Il marchait)';
-                default:
-                    return 'Première personne';
-            }
-        } else if (level === 2 /* Intermédiaire */) {
-            // Ajoute des options plus complexes
-            switch (value) {
-                case 1:
-                    return 'Première personne (Je acteur)';
-                case 2:
-                    return 'Première personne (Je témoin) - Observateur (ex: Je le regardais marcher)';
-                case 3:
-                    return 'Troisième omnisciente';
-                case 4:
-                    return 'Troisième limitée - Focus sur un personnage (ex: Il marchait, ignorant le danger)';
-                default:
-                    return 'Première personne';
-            }
-        } else if (level === 3 /* Avancé */) {
-            // Toutes les options, y compris "Deuxième personne" et "Nous collectif"
-            switch (value) {
-                case 1:
-                    return 'Première personne (Je acteur)';
-                case 2:
-                    return 'Première personne (Je témoin)';
-                case 3:
-                    return 'Troisième omnisciente';
-                case 4:
-                    return 'Troisième limitée';
-                case 5:
-                    return 'Deuxième personne (Tu) - Immersion forte (ex: Tu marches vers la mort)';
-                case 6:
-                    return 'Nous collectif - Voix chorale (ex: Nous marchions, unis par le destin)';
-                default:
-                    return 'Troisième omnisciente';
-            }
-        }
-        return 'Première personne';
-    }
-
-    static getDialogueType(value: number, level: number): string {
-        // Restreindre les options selon le niveau
-        if (level === 1 /* Débutant */) {
-            // Options simples
-            switch (value) {
-                case 1:
-                    return 'Dialogue direct - Paroles exactes (ex: "Je t’aime !")';
-                case 2:
-                    return 'Dialogue indirect - Résumé par le narrateur (ex: Il dit qu’il m’aime)';
-                default:
-                    return 'Dialogue direct';
-            }
-        } else if (level === 2 /* Intermédiaire */) {
-            // Ajoute "Dialogue mixte"
-            switch (value) {
-                case 1:
-                    return 'Dialogue direct';
-                case 2:
-                    return 'Dialogue indirect';
-                case 3:
-                    return 'Dialogue mixte (ex: "Je t’aime" dit-il, puis explique ses sentiments)';
-                default:
-                    return 'Dialogue direct';
-            }
-        } else if (level === 3 /* Avancé */) {
-            // Toutes les options, y compris "Monologue intérieur"
-            switch (value) {
-                case 1:
-                    return 'Dialogue direct';
-                case 2:
-                    return 'Dialogue indirect';
-                case 3:
-                    return 'Dialogue mixte';
-                case 4:
-                    return 'Monologue intérieur (ex: *Je ne peux pas le perdre...*)';
-                default:
-                    return 'Dialogue direct';
-            }
-        }
-        return 'Dialogue direct';
-    }
-}
diff --git a/lib/models/System.ts b/lib/models/System.ts
deleted file mode 100644
index 4b397d0..0000000
--- a/lib/models/System.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import axios, {AxiosResponse} from "axios";
-import {configs} from "@/lib/configs";
-
-export default class System{
-    static verifyInput(input: string): boolean {
-        let pattern: RegExp = new RegExp('(<.*?>)|(&.*?;)|({.*?})', 'gmi');
-        return pattern.test(input);
-    }
-
-    public static timeStampInSeconds(): number {
-        const date: number = new Date().getTime();
-        return Math.floor(date / 1000);
-    }
-
-    public static formatHTMLContent(htmlContent: string): string {
-        return htmlContent
-            .replace(/<h1>/g, '<h1 style="color: #FFFFFF; text-indent: 5px; font-size: 28px; font-weight: bold; text-align: left; margin-vertical: 10px;">')
-            .replace(/<p>/g, '<p style="color: #d0d0d0; text-indent: 30px; font-size: 16px; line-height: 22px; margin-vertical: 5px;">')
-            .replace(/<blockquote>/g, '<blockquote style="border-left-width: 4px; border-left-color: #ccc; padding-left: 10px; font-style: italic; color: #555;">');
-    }
-    
-    public static textContentToHtml(content: string): string {
-        const paragraphs: string[] = content
-            .split(/\n+/)
-            .map((paragraph: string) => paragraph.trim())
-            .filter((paragraph: string) => paragraph.length > 0);
-        
-        return paragraphs
-            .map((paragraph: string) => `<p>${paragraph}</p>`)
-            .join('');
-    }
-    
-    public static async authGetQueryToServer<T>(url: string, auth: string, lang: string = "fr", params: Record<string, any> = {}): Promise<T> {
-        try {
-            const response: AxiosResponse<T> = await axios({
-                method: 'GET',
-                headers: {
-                    'Authorization': `Bearer ${auth}`
-                },
-                params: {
-                    lang: lang,
-                    plateforme: 'desktop',
-                    ...params
-                },
-                url: configs.apiUrl + url,
-            })
-            return response.data;
-        } catch (e: unknown) {
-            if (axios.isAxiosError(e)) {
-                const serverMessage: string = e.response?.data?.message || e.response?.data || e.message;
-                throw new Error(serverMessage as string);
-            } else if (e instanceof Error) {
-                throw new Error(e.message);
-            } else {
-                throw new Error('An unexpected error occurred');
-            }
-        }
-    }
-    
-    public static setCookie(name: string, value: string, days: number): void {
-        const date = new Date();
-        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-        const expires = `expires=${date.toUTCString()}`;
-        let domain: string = '';
-        if (!/localhost|127\.0\.0\.1/.test(window.location.hostname)) {
-            domain = `domain=${window.location.hostname};`;
-        }
-        const secure = 'Secure;';
-        const sameSite = 'SameSite=Strict;';
-        document.cookie = `${name}=${value}; ${expires}; ${domain} path=/; ${secure} ${sameSite}`;
-    }
-    
-    public static async authPutToServer<T>(url: string, data: {}, auth: string, lang: string = "fr"): Promise<T> {
-        try {
-            const response: AxiosResponse<T> = await axios({
-                method: 'PUT',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${auth}`
-                },
-                params: {
-                    lang: lang,
-                    plateforme: 'desktop',
-                },
-                url: configs.apiUrl + url,
-                data: data
-            })
-            return response.data;
-        } catch (e: unknown) {
-            if (axios.isAxiosError(e)) {
-                const serverMessage: string = e.response?.data?.message || e.response?.data || e.message;
-                throw new Error(serverMessage as string);
-            } else if (e instanceof Error) {
-                throw new Error(e.message);
-            } else {
-                throw new Error('An unexpected error occurred');
-            }
-        }
-    }
-    
-    public static async authPatchToServer<T>(url: string, data: {}, auth: string, lang: string = "fr"): Promise<T> {
-        try {
-            const response: AxiosResponse<T> = await axios({
-                method: 'patch',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${auth}`
-                },
-                params: {
-                    lang: lang,
-                    plateforme: 'desktop',
-                },
-                url: configs.apiUrl + url,
-                data: data
-            })
-            return response.data;
-        } catch (e: unknown) {
-            if (axios.isAxiosError(e)) {
-                const serverMessage: string = e.response?.data?.message || e.response?.data || e.message;
-                throw new Error(serverMessage as string);
-            } else if (e instanceof Error) {
-                throw new Error(e.message);
-            } else {
-                throw new Error('An unexpected error occurred');
-            }
-        }
-    }
-    
-    public static async postToServer<T>(url: string, data: {}, lang: string = "fr"): Promise<T> {
-        try {
-            const response: AxiosResponse<T> = await axios({
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                url: configs.apiUrl + url,
-                params: {
-                    lang: lang,
-                    plateforme: 'desktop',
-                },
-                data: data
-            })
-            return response.data;
-        } catch (e: unknown) {
-            if (axios.isAxiosError(e)) {
-                const serverMessage: string = e.response?.data?.message || e.response?.data || e.message;
-                throw new Error(serverMessage as string);
-            } else if (e instanceof Error) {
-                throw new Error(e.message);
-            } else {
-                throw new Error('An unexpected error occurred');
-            }
-        }
-    }
-
-    public static async authPostToServer<T>(url: string, data: {}, auth: string, lang: string = "fr"): Promise<T> {
-        try {
-            const response: AxiosResponse<T> = await axios({
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${auth}`
-                },
-                url: configs.apiUrl + url,
-                params: {
-                    lang: lang,
-                    plateforme: 'desktop',
-                },
-                data: data
-            })
-            return response.data;
-        } catch (e: unknown) {
-            if (axios.isAxiosError(e)) {
-                const serverMessage: string = e.response?.data?.message || e.response?.data || e.message;
-                throw new Error(serverMessage as string);
-            } else if (e instanceof Error) {
-                throw new Error(e.message);
-            } else {
-                throw new Error('An unexpected error occurred');
-            }
-        }
-    }
-
-    static htmlToText(html: string) {
-        return html
-            .replace(/<br\s*\/?>/gi, '\n')
-            .replace(/<\/?(p|h[1-6]|div)(\s+[^>]*)?>/gi, '\n')
-            .replace(/<\/?[^>]+(>|$)/g, '')
-            .replace(/(\n\s*){2,}/g, '\n\n')
-            .replace(/^\s+|\s+$|(?<=\s)\s+/g, '')
-            .trim();
-    }
-
-    public static getCookie(name: string): string | null {
-        const nameEQ = `${name}=`;
-        const allCookies: string[] = document.cookie.split(';');
-        for (let i: number = 0; i < allCookies.length; i++) {
-            let cookie: string = allCookies[i];
-            while (cookie.charAt(0) === ' ') cookie = cookie.substring(1, cookie.length);
-            if (cookie.indexOf(nameEQ) === 0) return cookie.substring(nameEQ.length, cookie.length);
-        }
-        return null;
-    }
-    
-    public static removeCookie(name: string): void {
-        let domain: string = '';
-        if (!/localhost|127\.0\.0\.1/.test(window.location.hostname)) {
-            domain = `domain=${window.location.hostname};`;
-        }
-        const secure = 'Secure;';
-        const sameSite = 'SameSite=Strict;';
-        document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; ${domain} path=/; ${secure} ${sameSite}`;
-    }
-    
-    public static async authUploadFileToServer<T>(url: string, file: File, auth: string, lang: string = "fr"): Promise<T> {
-        try {
-            const formData: FormData = new FormData();
-            formData.append('file', file);
-            formData.append('lang', lang);
-            formData.append('plateforme', 'desktop');
-
-            const response: AxiosResponse<T> = await axios({
-                method: 'POST',
-                headers: {
-                    'Authorization': `Bearer ${auth}`,
-                },
-                url: configs.apiUrl + url,
-                params: {
-                    lang: lang,
-                    plateforme: 'desktop',
-                },
-                data: formData,
-            });
-            return response.data;
-        } catch (e: unknown) {
-            if (axios.isAxiosError(e)) {
-                const serverMessage: string = e.response?.data?.message || e.response?.data || e.message;
-                throw new Error(serverMessage as string);
-            } else if (e instanceof Error) {
-                throw new Error(e.message);
-            } else {
-                throw new Error('An unexpected error occurred');
-            }
-        }
-    }
-
-    public static async authDeleteToServer<T>(url: string, data: {}, auth: string, lang: string = "fr"): Promise<T> {
-        try {
-            const response: AxiosResponse<T> = await axios({
-                method: 'DELETE',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${auth}`
-                },
-                url: configs.apiUrl + url,
-                params: {
-                    lang: lang,
-                    plateforme: 'desktop',
-                },
-                data: data
-            })
-            return response.data;
-        } catch (e: unknown) {
-            if (axios.isAxiosError(e)) {
-                const serverMessage: string = e.response?.data?.message || e.response?.data || e.message;
-                throw new Error(serverMessage as string);
-            } else if (e instanceof Error) {
-                throw new Error(e.message);
-            } else {
-                throw new Error('An unexpected error occurred');
-            }
-        }
-    }
-}
diff --git a/lib/models/User.ts b/lib/models/User.ts
deleted file mode 100644
index 5cd08a5..0000000
--- a/lib/models/User.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import {SelectBoxProps} from "@/shared/interface";
-import {BookProps} from "@/lib/models/Book";
-import {SessionProps} from "@/lib/models/Session";
-
-export interface Author {
-    id: string;
-    name: string;
-}
-
-export interface UserProps {
-    id: string;
-    name: string;
-    lastName: string;
-    username: string;
-    authorName?: string;
-    email?: string;
-    accountVerified?: boolean;
-    termsAccepted?: boolean;
-    aiUsage: number,
-    apiKeys: {
-        gemini: boolean
-        openai: boolean,
-        anthropic: boolean,
-    },
-    guideTour?: GuideTour[];
-    subscription?: Subscription[];
-    writingLang: number;
-    writingLevel: number;
-    ritePoints: number;
-    creditsBalance:number;
-	groupId: number;
-}
-
-export interface GuideTour {
-    [key: string]: boolean;
-}
-
-export interface Subscription {
-    subType: string;
-    subTier: number;
-    status: boolean;
-}
-
-export const writingLevel: SelectBoxProps[] = [
-    {value: '0', label: 'Sélectionner un niveau d\'écriture'},
-    {value: '1', label: 'Je suis débutant'},
-    {value: '2', label: 'Je suis intermédiaire'},
-    {value: '3', label: 'Je suis avancé'},
-];
-
-export default class User {
-    static getCurrentSubscription(user: UserProps | null, type: "quill-sense" | "use-your-keys" | "quill-trial"): Subscription | null {
-        if (!user || !user.subscription || user.subscription.length === 0) {
-            return null;
-        }
-        return user.subscription.find((sub: Subscription): boolean => {
-            return sub.subType === type && sub.status;
-        }) || null;
-    }
-    static getWritingLevel(level: number): string {
-        switch (level) {
-            case 1:
-                return 'Débutant';
-            case 2:
-                return 'Intermédiaire';
-            case 3:
-                return 'Avancé';
-            default:
-                return 'Débutant';
-        }
-    }
-    
-    static guideTourDone(guide: GuideTour[], tour: string): boolean {
-        if (!tour) return false;
-        
-        if (guide && guide.find((guide: GuideTour): boolean => guide[tour]) !== undefined) {
-            return false;
-        }
-
-        // Vérifier ensuite dans localStorage pour le mode offline
-        if (typeof window !== 'undefined' && window.localStorage) {
-            const completedGuides = JSON.parse(localStorage.getItem('completedGuides') || '[]');
-            if (completedGuides.includes(tour)) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-    
-    static setNewGuideTour(session: SessionProps, tour: string): SessionProps {
-        const newGuideTour: { [key: string]: boolean }[] = [
-            ...(session?.user?.guideTour ?? []),
-            {[tour]: true}
-        ];
-        return {
-            ...session,
-            user: {
-                ...session?.user as UserProps,
-                guideTour: newGuideTour
-            }
-        }
-    }
-}
diff --git a/lib/models/World.ts b/lib/models/World.ts
deleted file mode 100755
index fe79e64..0000000
--- a/lib/models/World.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import {
-    faCrown,
-    faExclamationTriangle,
-    faFlag,
-    faGavel,
-    faIndustry,
-    faLeaf,
-    faMountain,
-    faMusic,
-    faPeopleArrows,
-    faSnowflake,
-    faUserCog,
-    faUserFriends,
-    IconDefinition,
-} from '@fortawesome/free-solid-svg-icons';
-
-export interface ElementSection {
-    title: string;
-    section: keyof WorldProps;
-    icon: IconDefinition;
-}
-
-export interface WorldElement {
-    id: string;
-    name: string;
-    description: string;
-}
-
-export interface WorldProps {
-    id: string;
-    name: string;
-    history: string;
-    politics: string;
-    economy: string;
-    religion: string;
-    languages: string;
-    laws: WorldElement[];
-    biomes: WorldElement[];
-    issues: WorldElement[];
-    customs: WorldElement[];
-    kingdoms: WorldElement[];
-    climate: WorldElement[];
-    resources: WorldElement[];
-    wildlife: WorldElement[];
-    arts: WorldElement[];
-    ethnicGroups: WorldElement[];
-    socialClasses: WorldElement[];
-    importantCharacters: WorldElement[];
-    seriesWorldId?: string | null;
-}
-
-export interface WorldListResponse {
-    worlds: WorldProps[];
-    enabled: boolean;
-}
-
-export const elementSections: ElementSection[] = [
-    {
-        title: 'Lois',
-        section: 'laws',
-        icon: faGavel,
-    },
-    {
-        title: 'Biomes',
-        section: 'biomes',
-        icon: faMountain,
-    },
-    {
-        title: 'Problèmes',
-        section: 'issues',
-        icon: faExclamationTriangle,
-    },
-    {
-        title: 'Coutumes',
-        section: 'customs',
-        icon: faPeopleArrows,
-    },
-    {
-        title: 'Royaumes',
-        section: 'kingdoms',
-        icon: faFlag,
-    },
-    {
-        title: 'Climat',
-        section: 'climate',
-        icon: faSnowflake,
-    },
-    {
-        title: 'Ressources',
-        section: 'resources',
-        icon: faIndustry,
-    },
-    {
-        title: 'Faune',
-        section: 'wildlife',
-        icon: faLeaf,
-    },
-    {
-        title: 'Arts',
-        section: 'arts',
-        icon: faMusic,
-    },
-    {
-        title: 'Groupes ethniques',
-        section: 'ethnicGroups',
-        icon: faUserFriends,
-    },
-    {
-        title: 'Classes sociales',
-        section: 'socialClasses',
-        icon: faUserCog,
-    },
-    {
-        title: 'Personnages importants',
-        section: 'importantCharacters',
-        icon: faCrown,
-    },
-];
-
-export default class World {
-    constructor() {
-    }
-}
diff --git a/lib/navigation.ts b/lib/navigation.ts
new file mode 100644
index 0000000..b23fe62
--- /dev/null
+++ b/lib/navigation.ts
@@ -0,0 +1,20 @@
+import {useNavigate, useParams as useRouterParams, Link, useLocation} from 'react-router-dom';
+
+function useRouter() {
+    const navigate = useNavigate();
+    return {
+        push: (path: string) => navigate(path),
+        replace: (path: string) => navigate(path, {replace: true}),
+        back: () => navigate(-1),
+    };
+}
+
+function useParams<T extends Record<string, string>>(): T {
+    return useRouterParams() as T;
+}
+
+function usePathname(): string {
+    return useLocation().pathname;
+}
+
+export {Link, useRouter, useParams, usePathname};
diff --git a/lib/tauri.ts b/lib/tauri.ts
new file mode 100644
index 0000000..09079a5
--- /dev/null
+++ b/lib/tauri.ts
@@ -0,0 +1,735 @@
+import {invoke as tauriInvoke} from '@tauri-apps/api/core';
+
+async function invoke<T>(command: string, args?: Record<string, unknown>): Promise<T> {
+    try {
+        return await tauriInvoke<T>(command, args);
+    } catch (e: unknown) {
+        if (e instanceof Error) throw e;
+        if (typeof e === 'string') throw new Error(e);
+        if (typeof e === 'object' && e !== null && 'message' in e) throw new Error(String((e as {message: string}).message));
+        throw new Error(String(e));
+    }
+}
+
+export {invoke};
+
+// ─── Types ─────────────────────────────────────────────────
+
+import {BookProps, GuideLine, GuideLineAI} from '@/lib/types/book';
+import {ChapterProps} from '@/lib/types/chapter';
+import {UserProps} from '@/lib/types/user';
+
+export interface InitUserResult {
+    success: boolean;
+    error: string | null;
+}
+
+export interface OfflineResult {
+    success: boolean;
+    error: string | null;
+    userId: string | null;
+}
+
+export interface OfflineModeStatus {
+    enabled: boolean;
+    syncInterval: number;
+    hasPin: boolean;
+    lastUserId: string | null;
+}
+
+export interface SyncCheckResult {
+    shouldSync: boolean;
+    daysSinceSync: number | null;
+    syncInterval: number | null;
+}
+
+export interface TombstoneRecord {
+    tableName: string;
+    entityId: string;
+    bookId: string | null;
+    deletedAt: number;
+}
+
+// ─── User & Auth ───────────────────────────────────────────
+
+export async function initUser(userId: string): Promise<InitUserResult> {
+    return invoke<InitUserResult>('init_user', {data: {userId}});
+}
+
+export async function dbInitialize(userId: string, encryptionKey: string): Promise<boolean> {
+    return invoke<boolean>('db_initialize', {userId, encryptionKey});
+}
+
+export async function getToken(): Promise<string | null> {
+    return invoke<string | null>('get_token');
+}
+
+export async function setToken(token: string): Promise<void> {
+    return invoke<void>('set_token', {token});
+}
+
+export async function removeToken(): Promise<void> {
+    return invoke<void>('remove_token');
+}
+
+export async function getUserEncryptionKey(userId: string): Promise<string | null> {
+    return invoke<string | null>('get_user_encryption_key', {userId});
+}
+
+export async function getPlatform(): Promise<string> {
+    return invoke<string>('get_platform');
+}
+
+export async function getUserInfo(): Promise<UserProps> {
+    return invoke<UserProps>('get_user_info');
+}
+
+export async function syncUser(data: {
+    userId: string;
+    username: string;
+    email: string;
+}): Promise<boolean> {
+    return invoke<boolean>('sync_user', {data});
+}
+
+// ─── Dev ──────────────────────────────────────────────────
+
+export async function devResetAll(): Promise<boolean> {
+    return invoke<boolean>('dev_reset_all');
+}
+
+// ─── Offline ───────────────────────────────────────────────
+
+export async function offlinePinSet(pin: string): Promise<OfflineResult> {
+    return invoke<OfflineResult>('offline_pin_set', {data: {pin}});
+}
+
+export async function offlinePinVerify(pin: string): Promise<OfflineResult> {
+    return invoke<OfflineResult>('offline_pin_verify', {data: {pin}});
+}
+
+export async function offlineModeGet(): Promise<OfflineModeStatus> {
+    return invoke<OfflineModeStatus>('offline_mode_get');
+}
+
+export async function offlineModeSet(enabled: boolean, syncIntervalDays: number): Promise<boolean> {
+    return invoke<boolean>('offline_mode_set', {data: {enabled, syncIntervalDays}});
+}
+
+export async function offlineSyncCheck(): Promise<SyncCheckResult> {
+    return invoke<SyncCheckResult>('offline_sync_check');
+}
+
+// ─── Book ──────────────────────────────────────────────────
+
+export async function getBooks(): Promise<BookProps[]> {
+    return invoke<BookProps[]>('get_books');
+}
+
+export async function getBook(bookId: string): Promise<BookProps> {
+    return invoke<BookProps>('get_book', {bookId});
+}
+
+export async function createBook(data: {
+    title: string;
+    subTitle?: string;
+    summary?: string;
+    type: string;
+    serieId?: number;
+    desiredReleaseDate?: string;
+    desiredWordCount?: number;
+}): Promise<string> {
+    return invoke<string>('create_book', {data});
+}
+
+export async function updateBookBasicInfo(data: {
+    bookId: string;
+    title: string;
+    subTitle: string;
+    summary: string;
+    publicationDate: string;
+    wordCount: number;
+}): Promise<boolean> {
+    return invoke<boolean>('update_book_basic_info', {data});
+}
+
+export async function deleteBook(id: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_book', {data: {id, deletedAt}});
+}
+
+export async function updateBookToolSetting(bookId: string, toolName: string, enabled: boolean): Promise<boolean> {
+    return invoke<boolean>('update_book_tool_setting', {data: {bookId, toolName, enabled}});
+}
+
+export async function getBookStory(bookId: string): Promise<unknown> {
+    return invoke<unknown>('get_book_story', {data: {bookId}});
+}
+
+export async function updateBookStory(data: {
+    bookId: string;
+    acts: unknown[];
+    mainChapters: unknown[];
+    issues: unknown[];
+}): Promise<boolean> {
+    return invoke<boolean>('update_book_story', {data});
+}
+
+export async function addIncident(bookId: string, name: string, incidentId?: string): Promise<string> {
+    return invoke<string>('add_incident', {data: {bookId, name, incidentId}});
+}
+
+export async function removeIncident(bookId: string, incidentId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('remove_incident', {data: {bookId, incidentId, deletedAt}});
+}
+
+export async function addPlotPoint(bookId: string, name: string, incidentId: string, plotId?: string): Promise<string> {
+    return invoke<string>('add_plot_point', {data: {bookId, name, incidentId, plotId}});
+}
+
+export async function removePlotPoint(plotId: string, bookId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('remove_plot_point', {data: {plotId, bookId, deletedAt}});
+}
+
+export async function addIssue(bookId: string, name: string, issueId?: string): Promise<string> {
+    return invoke<string>('add_issue', {data: {bookId, name, issueId}});
+}
+
+export async function removeIssue(bookId: string, issueId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('remove_issue', {data: {bookId, issueId, deletedAt}});
+}
+
+export async function getBookBasicInformation(bookId: string): Promise<BookProps> {
+    return invoke<BookProps>('get_book_basic_information', {bookId});
+}
+
+export async function getBookExportInfo(bookId: string): Promise<unknown[]> {
+    return invoke<unknown[]>('get_book_export_info', {data: {bookId}});
+}
+
+export async function exportBook(data: {
+    bookId: string;
+    format: string;
+    selections: unknown[] | null;
+}): Promise<boolean> {
+    return invoke<boolean>('export_book', {data});
+}
+
+// ─── Book Guidelines ────────────────────────────────────────
+
+
+export async function getGuideLine(bookId: string): Promise<GuideLine> {
+    return invoke<GuideLine>('get_guideline', {data: {id: bookId}});
+}
+
+export async function getAIGuideLine(bookId: string): Promise<GuideLineAI> {
+    return invoke<GuideLineAI>('get_ai_guideline', {data: {id: bookId}});
+}
+
+export async function updateGuideLine(data: {
+    bookId: string;
+    tone: string;
+    atmosphere: string;
+    writingStyle: string;
+    themes: string;
+    symbolism: string;
+    motifs: string;
+    narrativeVoice: string;
+    pacing: string;
+    intendedAudience: string;
+    keyMessages: string;
+}): Promise<boolean> {
+    return invoke<boolean>('update_guideline', {data});
+}
+
+export async function updateAIGuideLine(data: {
+    bookId: string;
+    plotSummary: string;
+    verbTense: string;
+    narrativeType: string;
+    dialogueType: string;
+    toneAtmosphere: string;
+    language: string;
+    themes: string;
+}): Promise<boolean> {
+    return invoke<boolean>('update_ai_guideline', {data});
+}
+
+// ─── Chapter ───────────────────────────────────────────────
+
+export async function getChapters(bookId: string): Promise<ChapterProps[]> {
+    return invoke<ChapterProps[]>('get_chapters', {bookId});
+}
+
+export async function getWholeChapter(id: string, version: number, bookId: string): Promise<ChapterProps> {
+    return invoke<ChapterProps>('get_whole_chapter', {data: {id, version, bookId}});
+}
+
+export async function getChapterStory(chapterId: string): Promise<unknown[]> {
+    return invoke<unknown[]>('get_chapter_story', {chapterId});
+}
+
+export async function getCompanionContent(chapterId: string, version: number): Promise<unknown> {
+    return invoke<unknown>('get_companion_content', {data: {chapterId, version}});
+}
+
+export async function getChapterContent(chapterId: string, version: number): Promise<string> {
+    return invoke<string>('get_chapter_content', {data: {chapterId, version}});
+}
+
+export async function saveChapterContent(data: {
+    chapterId: string;
+    version: number;
+    content: unknown;
+    totalWordCount: number;
+    contentId: string;
+}): Promise<boolean> {
+    return invoke<boolean>('save_chapter_content', {data});
+}
+
+export async function getLastChapter(bookId: string): Promise<ChapterProps | null> {
+    return invoke<ChapterProps | null>('get_last_chapter', {bookId});
+}
+
+export async function addChapter(data: {
+    bookId: string;
+    title: string;
+    chapterOrder: number;
+    chapterId?: string;
+}): Promise<string> {
+    return invoke<string>('add_chapter', {data});
+}
+
+export async function removeChapter(chapterId: string, bookId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('remove_chapter', {data: {chapterId, bookId, deletedAt}});
+}
+
+export async function updateChapter(chapterId: string, title: string, chapterOrder: number): Promise<boolean> {
+    return invoke<boolean>('update_chapter', {data: {chapterId, title, chapterOrder}});
+}
+
+export async function addChapterInformation(data: {
+    chapterId: string;
+    actId: number;
+    bookId: string;
+    plotId?: string;
+    incidentId?: string;
+    chapterInfoId?: string;
+}): Promise<string> {
+    return invoke<string>('add_chapter_information', {data});
+}
+
+export async function removeChapterInformation(chapterInfoId: string, bookId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('remove_chapter_information', {data: {chapterInfoId, bookId, deletedAt}});
+}
+
+export async function getBookTags(bookId: string): Promise<unknown> {
+    return invoke<unknown>('get_book_tags', {bookId});
+}
+
+// ─── Character ─────────────────────────────────────────────
+
+export async function getCharacterList(bookId: string, enabled: boolean): Promise<unknown> {
+    return invoke<unknown>('get_character_list', {data: {bookId, enabled}});
+}
+
+export async function getCharacterAttributes(characterId: string): Promise<unknown[]> {
+    return invoke<unknown[]>('get_character_attributes', {data: {characterId}});
+}
+
+export async function createCharacter(character: unknown, bookId: string, id?: string): Promise<string> {
+    return invoke<string>('create_character', {data: {character, bookId, id}});
+}
+
+export async function addCharacterAttribute(characterId: string, type: string, name: string, id?: string): Promise<string> {
+    return invoke<string>('add_character_attribute', {data: {characterId, type, name, id}});
+}
+
+export async function deleteCharacterAttribute(attributeId: string, bookId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_character_attribute', {data: {attributeId, bookId, deletedAt}});
+}
+
+export async function updateCharacter(character: unknown): Promise<boolean> {
+    return invoke<boolean>('update_character', {data: {character}});
+}
+
+export async function deleteCharacter(characterId: string, bookId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_character', {data: {characterId, bookId, deletedAt}});
+}
+
+// ─── Location ──────────────────────────────────────────────
+
+export async function getAllLocations(bookId: string, enabled: boolean): Promise<unknown> {
+    return invoke<unknown>('get_all_locations', {data: {bookId, enabled}});
+}
+
+export async function addLocationSection(locationName: string, bookId: string, id?: string, seriesLocationId?: string): Promise<string> {
+    return invoke<string>('add_location_section', {data: {locationName, bookId, id, seriesLocationId}});
+}
+
+export async function addLocationElement(locationId: string, elementName: string, id?: string): Promise<string> {
+    return invoke<string>('add_location_element', {data: {locationId, elementName, id}});
+}
+
+export async function addLocationSubElement(elementId: string, subElementName: string, id?: string): Promise<string> {
+    return invoke<string>('add_location_sub_element', {data: {elementId, subElementName, id}});
+}
+
+export async function updateLocations(locations: unknown[]): Promise<unknown> {
+    return invoke<unknown>('update_locations', {data: {locations}});
+}
+
+export async function updateLocationSectionWithSeriesLink(sectionId: string, sectionName?: string, seriesLocationId?: string): Promise<boolean> {
+    return invoke<boolean>('update_location_section_with_series_link', {data: {sectionId, sectionName, seriesLocationId}});
+}
+
+export async function deleteLocationSection(locationId: string, bookId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_location_section', {data: {locationId, bookId, deletedAt}});
+}
+
+export async function deleteLocationElement(elementId: string, bookId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_location_element', {data: {elementId, bookId, deletedAt}});
+}
+
+export async function deleteLocationSubElement(subElementId: string, bookId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_location_sub_element', {data: {subElementId, bookId, deletedAt}});
+}
+
+// ─── Spell ─────────────────────────────────────────────────
+
+export async function getSpellList(bookId: string, enabled: boolean): Promise<unknown> {
+    return invoke<unknown>('get_spell_list', {data: {bookId, enabled}});
+}
+
+export async function getSpellTags(bookId: string): Promise<unknown[]> {
+    return invoke<unknown[]>('get_spell_tags', {data: {bookId}});
+}
+
+export async function getSpellDetail(spellId: string): Promise<unknown> {
+    return invoke<unknown>('get_spell_detail', {data: {spellId}});
+}
+
+export async function createSpell(bookId: string, spell: unknown): Promise<unknown> {
+    return invoke<unknown>('create_spell', {data: {bookId, spell}});
+}
+
+export async function updateSpell(spellId: string, spell: unknown): Promise<boolean> {
+    return invoke<boolean>('update_spell', {data: {spellId, spell}});
+}
+
+export async function deleteSpell(spellId: string, bookId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_spell', {data: {spellId, bookId, deletedAt}});
+}
+
+export async function createSpellTag(bookId: string, name: string, color?: string, id?: string): Promise<unknown> {
+    return invoke<unknown>('create_spell_tag', {data: {bookId, name, color, id}});
+}
+
+export async function updateSpellTag(tagId: string, name: string, color?: string): Promise<boolean> {
+    return invoke<boolean>('update_spell_tag', {data: {tagId, name, color}});
+}
+
+export async function deleteSpellTag(tagId: string, bookId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_spell_tag', {data: {tagId, bookId, deletedAt}});
+}
+
+// ─── World ─────────────────────────────────────────────────
+
+export async function getWorlds(bookId: string, enabled: boolean): Promise<unknown> {
+    return invoke<unknown>('get_worlds', {data: {bookId, enabled}});
+}
+
+export async function addWorld(bookId: string, worldName: string, id?: string, seriesWorldId?: string): Promise<string> {
+    return invoke<string>('add_world', {data: {bookId, worldName, id, seriesWorldId}});
+}
+
+export async function addWorldElement(worldId: string, elementName: string, elementType: string, id?: string): Promise<string> {
+    return invoke<string>('add_world_element', {data: {worldId, elementName, elementType, id}});
+}
+
+export async function removeWorldElement(elementId: string, bookId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('remove_world_element', {data: {elementId, bookId, deletedAt}});
+}
+
+export async function updateWorld(world: unknown): Promise<boolean> {
+    return invoke<boolean>('update_world', {data: {world}});
+}
+
+// ─── Series ────────────────────────────────────────────────
+
+export async function getSeriesList(): Promise<unknown[]> {
+    return invoke<unknown[]>('get_series_list');
+}
+
+export async function getSeriesDetail(seriesId: string): Promise<unknown> {
+    return invoke<unknown>('get_series_detail', {data: {seriesId}});
+}
+
+export async function createSeries(data: unknown): Promise<string> {
+    return invoke<string>('create_series', {data});
+}
+
+export async function updateSeries(data: unknown): Promise<boolean> {
+    return invoke<boolean>('update_series', {data});
+}
+
+export async function deleteSeries(seriesId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_series', {data: {seriesId, deletedAt}});
+}
+
+export async function getSeriesBooks(seriesId: string): Promise<unknown[]> {
+    return invoke<unknown[]>('get_series_books', {data: {seriesId}});
+}
+
+export async function addBookToSeries(seriesId: string, bookId: string): Promise<boolean> {
+    return invoke<boolean>('add_book_to_series', {data: {seriesId, bookId}});
+}
+
+export async function removeBookFromSeries(seriesId: string, bookId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('remove_book_from_series', {data: {seriesId, bookId, deletedAt}});
+}
+
+export async function reorderSeriesBooks(seriesId: string, bookIds: string[]): Promise<boolean> {
+    return invoke<boolean>('reorder_series_books', {data: {seriesId, bookIds}});
+}
+
+export async function getSeriesForBook(bookId: string): Promise<string | null> {
+    return invoke<string | null>('get_series_for_book', {data: {bookId}});
+}
+
+// ─── Series Characters ─────────────────────────────────────
+
+export async function getSeriesCharacterList(seriesId: string): Promise<unknown[]> {
+    return invoke<unknown[]>('get_series_character_list', {data: {seriesId}});
+}
+
+export async function getSeriesCharacterAttributes(characterId: string): Promise<unknown> {
+    return invoke<unknown>('get_series_character_attributes', {data: {characterId}});
+}
+
+export async function addSeriesCharacter(data: unknown): Promise<string> {
+    return invoke<string>('add_series_character', {data});
+}
+
+export async function updateSeriesCharacter(data: unknown): Promise<boolean> {
+    return invoke<boolean>('update_series_character', {data});
+}
+
+export async function deleteSeriesCharacter(characterId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_series_character', {data: {characterId, deletedAt}});
+}
+
+export async function addSeriesCharacterAttribute(data: unknown): Promise<string> {
+    return invoke<string>('add_series_character_attribute', {data});
+}
+
+export async function deleteSeriesCharacterAttribute(attributeId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_series_character_attribute', {data: {attributeId, deletedAt}});
+}
+
+// ─── Series Locations ──────────────────────────────────────
+
+export async function getSeriesLocationList(seriesId: string): Promise<unknown[]> {
+    return invoke<unknown[]>('get_series_location_list', {data: {seriesId}});
+}
+
+export async function addSeriesLocationSection(data: unknown): Promise<string> {
+    return invoke<string>('add_series_location_section', {data});
+}
+
+export async function addSeriesLocationElement(data: unknown): Promise<string> {
+    return invoke<string>('add_series_location_element', {data});
+}
+
+export async function addSeriesLocationSubElement(data: unknown): Promise<string> {
+    return invoke<string>('add_series_location_sub_element', {data});
+}
+
+export async function deleteSeriesLocation(locationId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_series_location', {data: {locationId, deletedAt}});
+}
+
+export async function deleteSeriesLocationElement(elementId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_series_location_element', {data: {elementId, deletedAt}});
+}
+
+export async function deleteSeriesLocationSubElement(subElementId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_series_location_sub_element', {data: {subElementId, deletedAt}});
+}
+
+// ─── Series Worlds ─────────────────────────────────────────
+
+export async function getSeriesWorldList(seriesId: string): Promise<unknown[]> {
+    return invoke<unknown[]>('get_series_world_list', {data: {seriesId}});
+}
+
+export async function addSeriesWorld(data: unknown): Promise<string> {
+    return invoke<string>('add_series_world', {data});
+}
+
+export async function updateSeriesWorld(data: unknown): Promise<boolean> {
+    return invoke<boolean>('update_series_world', {data});
+}
+
+export async function addSeriesWorldElement(data: unknown): Promise<string> {
+    return invoke<string>('add_series_world_element', {data});
+}
+
+export async function deleteSeriesWorldElement(elementId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_series_world_element', {data: {elementId, deletedAt}});
+}
+
+// ─── Series Spells ─────────────────────────────────────────
+
+export async function getSeriesSpellList(seriesId: string): Promise<unknown[]> {
+    return invoke<unknown[]>('get_series_spell_list', {data: {seriesId}});
+}
+
+export async function getSeriesSpellDetail(spellId: string): Promise<unknown> {
+    return invoke<unknown>('get_series_spell_detail', {data: {spellId}});
+}
+
+export async function addSeriesSpell(data: unknown): Promise<string> {
+    return invoke<string>('add_series_spell', {data});
+}
+
+export async function updateSeriesSpell(data: unknown): Promise<boolean> {
+    return invoke<boolean>('update_series_spell', {data});
+}
+
+export async function deleteSeriesSpell(spellId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_series_spell', {data: {spellId, deletedAt}});
+}
+
+export async function addSeriesSpellTag(data: unknown): Promise<string> {
+    return invoke<string>('add_series_spell_tag', {data});
+}
+
+export async function updateSeriesSpellTag(data: unknown): Promise<boolean> {
+    return invoke<boolean>('update_series_spell_tag', {data});
+}
+
+export async function deleteSeriesSpellTag(tagId: string, deletedAt: number): Promise<boolean> {
+    return invoke<boolean>('delete_series_spell_tag', {data: {tagId, deletedAt}});
+}
+
+// ─── Sync (books/series) ───────────────────────────────────
+
+export async function getSyncedBooks(): Promise<unknown[]> {
+    return invoke<unknown[]>('get_synced_books');
+}
+
+export async function getSyncedSeries(): Promise<unknown[]> {
+    return invoke<unknown[]>('get_synced_series');
+}
+
+export async function uploadBookToServer(bookId: string): Promise<unknown> {
+    return invoke<unknown>('upload_book_to_server', {bookId});
+}
+
+export async function syncSaveBook(book: unknown): Promise<boolean> {
+    return invoke<boolean>('sync_save_book', {data: book});
+}
+
+export async function syncBookToClient(book: unknown): Promise<boolean> {
+    return invoke<boolean>('sync_book_to_client', {data: book});
+}
+
+export async function syncBookToServer(bookToSync: unknown): Promise<unknown> {
+    return invoke<unknown>('sync_book_to_server', {data: bookToSync});
+}
+
+export async function uploadSeriesToServer(seriesId: string): Promise<unknown> {
+    return invoke<unknown>('upload_series_to_server', {seriesId});
+}
+
+export async function syncSaveSeries(series: unknown): Promise<boolean> {
+    return invoke<boolean>('sync_save_series', {data: series});
+}
+
+export async function syncSeriesToClient(series: unknown): Promise<boolean> {
+    return invoke<boolean>('sync_series_to_client', {data: series});
+}
+
+export async function syncSeriesToServer(seriesToSync: unknown): Promise<unknown> {
+    return invoke<unknown>('sync_series_to_server', {data: seriesToSync});
+}
+
+export async function seriesSyncUpload(data: {
+    type: string;
+    bookElementId: string;
+    field: string;
+    value: string;
+}): Promise<unknown> {
+    return invoke<unknown>('series_sync_upload', {data});
+}
+
+// ─── Tombstones ────────────────────────────────────────────
+
+export async function getTombstonesSince(since: number): Promise<unknown[]> {
+    return invoke<unknown[]>('get_tombstones_since', {since});
+}
+
+export async function applyBookTombstones(tombstones: TombstoneRecord[]): Promise<void> {
+    return invoke<void>('apply_book_tombstones', {tombstones});
+}
+
+export async function applySeriesTombstones(tombstones: TombstoneRecord[]): Promise<void> {
+    return invoke<void>('apply_series_tombstones', {tombstones});
+}
+
+// ─── Window Management ──────────────────────────────────────
+
+export async function openLoginWindow(): Promise<void> {
+    const {WebviewWindow} = await import('@tauri-apps/api/webviewWindow');
+    const {getCurrentWindow} = await import('@tauri-apps/api/window');
+
+    const existing = await WebviewWindow.getByLabel('login');
+    if (existing) {
+        await existing.setFocus();
+        await getCurrentWindow().hide();
+        return;
+    }
+
+    const loginWindow = new WebviewWindow('login', {
+        url: '/login/login/',
+        title: 'ERitors - Connexion',
+        width: 500,
+        height: 900,
+        resizable: false,
+        center: true,
+        decorations: true,
+    });
+
+    loginWindow.once('tauri://created', async function () {
+        await getCurrentWindow().hide();
+    });
+}
+
+export async function loginSuccess(): Promise<void> {
+    const {WebviewWindow} = await import('@tauri-apps/api/webviewWindow');
+    const {getCurrentWindow} = await import('@tauri-apps/api/window');
+
+    const currentLabel = getCurrentWindow().label;
+
+    if (currentLabel === 'login') {
+        const {emit} = await import('@tauri-apps/api/event');
+        await emit('auth-success');
+        const mainWindow = await WebviewWindow.getByLabel('main');
+        if (mainWindow) {
+            await mainWindow.show();
+            await mainWindow.setFocus();
+        }
+        await getCurrentWindow().close();
+    } else {
+        window.location.reload();
+    }
+}
+
+export async function logout(): Promise<void> {
+    await openLoginWindow();
+}
+
+export async function openExternal(url: string): Promise<void> {
+    const {open} = await import('@tauri-apps/plugin-shell');
+    return open(url);
+}
diff --git a/lib/models/BookTables.ts b/lib/types/book-tables.ts
similarity index 79%
rename from lib/models/BookTables.ts
rename to lib/types/book-tables.ts
index d953d01..22d492f 100644
--- a/lib/models/BookTables.ts
+++ b/lib/types/book-tables.ts
@@ -1,18 +1,18 @@
 export interface EritBooksTable {
-    book_id:string;
-    type:string;
-    author_id:string;
-    title:string;
-    hashed_title:string;
-    sub_title:string|null;
-    hashed_sub_title:string|null;
-    summary:string|null;
-    serie_id:number|null;
-    desired_release_date:string|null;
-    desired_word_count:number|null;
-    words_count:number|null;
-    cover_image:string|null;
-    last_update:number;
+    book_id: string;
+    type: string;
+    author_id: string;
+    title: string;
+    hashed_title: string;
+    sub_title: string | null;
+    hashed_sub_title: string | null;
+    summary: string | null;
+    serie_id: number | null;
+    desired_release_date: string | null;
+    desired_word_count: number | null;
+    words_count: number | null;
+    cover_image: string | null;
+    last_update: number;
 }
 
 export interface BookActSummariesTable {
@@ -140,6 +140,26 @@ export interface BookLocationTable {
     last_update: number;
 }
 
+export interface LocationElementTable {
+    element_id: string;
+    location: string;
+    user_id: string;
+    element_name: string;
+    original_name: string;
+    element_description: string | null;
+    last_update: number;
+}
+
+export interface LocationSubElementTable {
+    sub_element_id: string;
+    element_id: string;
+    user_id: string;
+    sub_elem_name: string;
+    original_name: string;
+    sub_elem_description: string | null;
+    last_update: number;
+}
+
 export interface BookPlotPointsTable {
     plot_point_id: string;
     title: string;
@@ -176,29 +196,29 @@ export interface BookWorldElementsTable {
     last_update: number;
 }
 
-export interface LocationElementTable {
-    element_id: string;
-    location: string;
-    user_id: string;
-    element_name: string;
-    original_name: string;
-    element_description: string | null;
-    last_update: number;
-}
-
-export interface LocationSubElementTable {
-    sub_element_id: string;
-    element_id: string;
-    user_id: string;
-    sub_elem_name: string;
-    original_name: string;
-    sub_elem_description: string | null;
-    last_update: number;
-}
-
 export interface GhostWriterSettingsTable {
     book_id: string;
     user_id: string;
     advanced_prompt: string | null;
     quillsense_enabled: number;
-}
\ No newline at end of file
+}
+
+export interface CompleteBook {
+    eritBooks: EritBooksTable[];
+    actSummaries: BookActSummariesTable[];
+    aiGuideLine: BookAIGuideLineTable[];
+    chapters: BookChaptersTable[];
+    chapterContents: BookChapterContentTable[];
+    chapterInfos: BookChapterInfosTable[];
+    characters: BookCharactersTable[];
+    characterAttributes: BookCharactersAttributesTable[];
+    guideLine: BookGuideLineTable[];
+    incidents: BookIncidentsTable[];
+    issues: BookIssuesTable[];
+    locations: BookLocationTable[];
+    plotPoints: BookPlotPointsTable[];
+    worlds: BookWorldTable[];
+    worldElements: BookWorldElementsTable[];
+    locationElements: LocationElementTable[];
+    locationSubElements: LocationSubElementTable[];
+}
diff --git a/lib/types/book.ts b/lib/types/book.ts
new file mode 100644
index 0000000..163f454
--- /dev/null
+++ b/lib/types/book.ts
@@ -0,0 +1,108 @@
+import {Author} from "@/lib/types/user";
+import {ActChapter, ChapterProps} from "@/lib/types/chapter";
+
+export interface BookToolsSettings {
+    characters: boolean;
+    worlds: boolean;
+    locations: boolean;
+    spells: boolean;
+}
+
+export interface BookProps {
+    bookId: string;
+    type: string;
+    title: string;
+    author?: Author;
+    serie?: number;
+    seriesId?: string | null;
+    subTitle?: string;
+    summary?: string;
+    publicationDate?: string;
+    desiredWordCount?: number;
+    totalWordCount?: number;
+    coverImage?: string;
+    chapters?: ChapterProps[];
+    quillsenseEnabled?: boolean;
+    tools?: BookToolsSettings;
+    localBook?: boolean;
+}
+
+export interface BookListProps {
+    id: string;
+    type: string;
+    authorId: string;
+    title: string;
+    subTitle?: string;
+    summary?: string;
+    serieId?: number;
+    desiredReleaseDate?: string;
+    desiredWordCount?: number;
+    wordCount?: number;
+    coverImage?: string;
+    bookMeta?: string;
+    quillsenseEnabled?: boolean;
+}
+
+export interface GuideLine {
+    tone: string;
+    atmosphere: string;
+    writingStyle: string;
+    themes: string;
+    symbolism: string;
+    motifs: string;
+    narrativeVoice: string;
+    pacing: string;
+    intendedAudience: string;
+    keyMessages: string;
+}
+
+export interface GuideLineAI {
+    narrativeType: number | null;
+    dialogueType: number | null;
+    globalResume: string | null;
+    atmosphere: string | null;
+    verbeTense: number | null;
+    langue: number | null;
+    currentResume: string | null;
+    themes: string | null;
+}
+
+export interface PlotPoint {
+    plotPointId: string;
+    title: string;
+    summary: string;
+    linkedIncidentId: string;
+    chapters?: ActChapter[];
+}
+
+export interface Incident {
+    incidentId: string;
+    title: string;
+    summary: string;
+    chapters?: ActChapter[];
+}
+
+export interface Issue {
+    name: string;
+    id: string;
+}
+
+export interface Act {
+    id: number;
+    summary: string | null;
+    incidents?: Incident[];
+    plotPoints?: PlotPoint[];
+    chapters?: ActChapter[];
+}
+
+export interface Tag {
+    label: string;
+    value: string;
+}
+
+export interface BookTags {
+    characters: Tag[];
+    locations: Tag[];
+    objects: Tag[];
+    worldElements: Tag[];
+}
diff --git a/lib/types/chapter.ts b/lib/types/chapter.ts
new file mode 100644
index 0000000..67b4f71
--- /dev/null
+++ b/lib/types/chapter.ts
@@ -0,0 +1,80 @@
+export interface ActChapter {
+    chapterInfoId: string;
+    chapterId: string;
+    title: string;
+    chapterOrder: number;
+    actId: number;
+    incidentId?: string;
+    plotPointId?: string;
+    summary: string;
+    goal: string;
+}
+
+export interface ChapterListProps {
+    chapterId: string;
+    title: string;
+    summary?: string;
+    chapterOrder?: number;
+    goal?: string;
+}
+
+export interface ChapterProps {
+    chapterId: string;
+    chapterOrder: number;
+    title: string;
+    chapterContent: ChapterContent;
+}
+
+export interface ChapterContent {
+    version: number;
+    content: string;
+    wordsCount: number;
+}
+
+export interface ChapterVersion {
+    value: number;
+    label: 'Invite' | 'Brouillon' | 'Perfectionnement' | 'Révision' | 'Finale';
+}
+
+export interface TiptapLinkAttrs {
+    href: string;
+    target?: string;
+}
+
+export type TiptapAttrValue = string | number | boolean | null | TiptapLinkAttrs;
+
+export type TiptapNode = {
+    type: string;
+    content?: TiptapNode[];
+    text?: string;
+    attrs?: {
+        [key: string]: TiptapAttrValue;
+    };
+};
+
+export interface CompanionContent {
+    version: number;
+    content: string;
+    wordsCount: number;
+}
+
+export type ExportFormat = 'epub' | 'pdf' | 'docx';
+
+export interface ChapterExportInfo {
+    chapterId: string;
+    title: string;
+    chapterOrder: number;
+    availableVersions: number[];
+}
+
+export interface ChapterExportSelection {
+    chapterId: string;
+    version: number;
+    selected: boolean;
+}
+
+export interface ExportRequestBody {
+    bookId: string;
+    format: ExportFormat;
+    chapters: { chapterId: string; version: number }[];
+}
diff --git a/lib/types/character.ts b/lib/types/character.ts
new file mode 100644
index 0000000..60e1407
--- /dev/null
+++ b/lib/types/character.ts
@@ -0,0 +1,105 @@
+import {LucideIcon} from 'lucide-react';
+
+export type CharacterCategory = 'main' | 'secondary' | 'recurring' | 'none';
+export type CharacterStatus = 'alive' | 'dead' | 'unknown';
+export type CharacterAttributeSection =
+    'physical'
+    | 'psychological'
+    | 'relations'
+    | 'skills'
+    | 'weaknesses'
+    | 'strengths'
+    | 'goals'
+    | 'motivations'
+    | 'arc'
+    | 'secrets'
+    | 'fears'
+    | 'flaws'
+    | 'beliefs'
+    | 'conflicts'
+    | 'quotes'
+    | 'distinguishingMarks'
+    | 'items'
+    | 'affiliations';
+
+export function isCharacterCategory(value: string): value is CharacterCategory {
+    return value === 'main' || value === 'secondary' || value === 'recurring' || value === 'none';
+}
+
+export function isCharacterStatus(value: string): value is CharacterStatus {
+    return value === 'alive' || value === 'dead' || value === 'unknown';
+}
+
+export interface Relation {
+    name: string;
+    type: string;
+    description: string;
+    history: string;
+}
+
+export interface Attribute {
+    id: string;
+    name: string;
+}
+
+export interface CharacterAttribute {
+    [key: string]: Array<Attribute>;
+}
+
+export interface CharacterProps {
+    id: string | null;
+    name: string;
+    lastName: string;
+    nickname: string;
+    age: number | null;
+    gender: string;
+    species: string;
+    nationality: string;
+    status: CharacterStatus;
+    category: CharacterCategory;
+    title: string;
+    image: string;
+    physical: Attribute[];
+    psychological: Attribute[];
+    relations: Attribute[];
+    skills: Attribute[];
+    weaknesses: Attribute[];
+    strengths: Attribute[];
+    goals: Attribute[];
+    motivations: Attribute[];
+    arc: Attribute[];
+    secrets: Attribute[];
+    fears: Attribute[];
+    flaws: Attribute[];
+    beliefs: Attribute[];
+    conflicts: Attribute[];
+    quotes: Attribute[];
+    distinguishingMarks: Attribute[];
+    items: Attribute[];
+    affiliations: Attribute[];
+    role: string;
+    biography?: string;
+    history?: string;
+    speechPattern?: string;
+    catchphrase?: string;
+    residence?: string;
+    notes?: string;
+    color?: string;
+    seriesCharacterId?: string | null;
+}
+
+export interface CharacterListResponse {
+    characters: CharacterProps[];
+    enabled: boolean;
+}
+
+export interface CharacterElement {
+    title: string;
+    section: CharacterAttributeSection;
+    placeholder: string;
+    icon: LucideIcon;
+}
+
+export interface AttributeResponse {
+    attributes: Attribute[];
+}
diff --git a/lib/types/editor.ts b/lib/types/editor.ts
new file mode 100644
index 0000000..b9e74db
--- /dev/null
+++ b/lib/types/editor.ts
@@ -0,0 +1,10 @@
+import {LucideIcon} from 'lucide-react';
+
+export interface PanelComponent {
+    id: number;
+    title: string;
+    badge: string;
+    description: string;
+    icon: LucideIcon;
+    action?: () => void;
+}
diff --git a/lib/models/Import.ts b/lib/types/import.ts
similarity index 59%
rename from lib/models/Import.ts
rename to lib/types/import.ts
index 86913d7..e911d19 100644
--- a/lib/models/Import.ts
+++ b/lib/types/import.ts
@@ -15,3 +15,13 @@ export interface ImportChapterSelection {
     wordCount: number;
     selected: boolean;
 }
+
+export interface ImportConfirmBody {
+    importId: string;
+    title: string;
+    subTitle: string;
+    summary: string;
+    type: string;
+    version: number;
+    selectedChapterIndexes: number[];
+}
diff --git a/lib/types/quillsense.ts b/lib/types/quillsense.ts
new file mode 100644
index 0000000..54d6280
--- /dev/null
+++ b/lib/types/quillsense.ts
@@ -0,0 +1,109 @@
+export type MessageType = "user" | "model";
+export type QSView = 'list' | 'chat' | 'ghostwritter' | 'dictionary' | 'synonyms' | 'conjugator' | 'inspiration';
+export type ConversationType = 'dictionary' | 'synonyms' | 'conjugator' | 'chatbot' | 'inspire';
+
+export interface Message {
+    id: number;
+    type: MessageType;
+    message: string;
+    date: string;
+}
+
+export interface Conversation {
+    id: string;
+    title?: string;
+    date?: string;
+    type?: ConversationType;
+    messages: Message[];
+    status: number;
+    totalPrice?: number;
+    useYourKey?: boolean;
+}
+
+export interface AIGeneratedTextData {
+    totalCost: number;
+    response: string;
+}
+
+export interface AIResponseWithCredits<T> {
+    useYourKey: boolean;
+    totalPrice: number;
+    data: T;
+}
+
+export interface AIDictionary extends AIResponseWithCredits<DictionaryAIResponse> {
+}
+
+export interface AIGeneratedText extends AIResponseWithCredits<AIGeneratedTextData> {
+}
+
+export interface AIInspire extends AIResponseWithCredits<InspireAIResponse> {
+}
+
+export interface AISynonyms extends AIResponseWithCredits<SynonymsAIResponse> {
+}
+
+export interface ConjugationTenses {
+    [tense: string]: {
+        firstPersonSingular?: string;
+        secondPersonSingular?: string;
+        thirdPersonSingular?: string;
+        firstPersonPlural?: string;
+        secondPersonPlural?: string;
+        thirdPersonPlural?: string;
+        présent?: string;
+        passé?: string;
+    } | string;
+}
+
+export interface ConjugationResponse {
+    conjugations: {
+        [mode: string]: ConjugationTenses;
+    };
+}
+
+export interface AIVerbConjugation extends AIResponseWithCredits<ConjugationResponse> {
+}
+
+export interface InspireAIResponse {
+    ideas: {
+        idea: string;
+        reason: string;
+        relatedTo: string;
+    }[];
+}
+
+export interface DictionaryAIResponse {
+    word: string;
+    definition: string;
+    example: string;
+    literaryUsage: string;
+}
+
+export interface SynonymAI {
+    word: string;
+    context: string;
+}
+
+export interface SynonymsAIResponse {
+    words: SynonymAI[];
+}
+
+export interface InspirationAIIdea {
+    idea: string;
+    reason: string;
+    relatedTo: string;
+}
+
+export interface ConversationProps {
+    id: string;
+    mode: string;
+    title: string;
+    startDate: string;
+    status: number;
+}
+
+export interface QuillSenseSettingsProps {
+    quillsenseEnabled: boolean;
+    advancedPrompt: string | null;
+}
diff --git a/lib/models/Series.ts b/lib/types/series.ts
similarity index 93%
rename from lib/models/Series.ts
rename to lib/types/series.ts
index ddf6245..80d3fe0 100644
--- a/lib/models/Series.ts
+++ b/lib/types/series.ts
@@ -37,7 +37,6 @@ export interface SeriesListItemProps {
     bookIds: string[];
 }
 
-// Personnages de série
 export interface SeriesCharacterListItem {
     id: string;
     name: string;
@@ -80,7 +79,6 @@ export interface SeriesCharacterAttribute {
 
 export type SeriesCharacterProps = SeriesCharacterDetailResponse;
 
-// Mondes de série
 export interface SeriesWorldElementItem {
     id: string;
     name: string;
@@ -118,7 +116,6 @@ export interface SeriesWorldElement {
     description: string;
 }
 
-// Lieux de série
 export interface SeriesLocationSubElement {
     id: string;
     name: string;
@@ -138,7 +135,6 @@ export interface SeriesLocationItem {
     elements: SeriesLocationElement[];
 }
 
-// Sorts de série (Grimoire)
 export interface SeriesSpellTag {
     id: string;
     name: string;
diff --git a/lib/types/session.ts b/lib/types/session.ts
new file mode 100644
index 0000000..a979ac2
--- /dev/null
+++ b/lib/types/session.ts
@@ -0,0 +1,14 @@
+import {UserProps} from "@/lib/types/user";
+
+export interface SessionProps {
+    isConnected: boolean;
+    accessToken: string;
+    user: UserProps | null;
+}
+
+export interface LoginResponse {
+    valid: boolean;
+    message?: string;
+    token?: string;
+    userid?: string;
+}
diff --git a/lib/types/settings.ts b/lib/types/settings.ts
new file mode 100644
index 0000000..b1d9ddb
--- /dev/null
+++ b/lib/types/settings.ts
@@ -0,0 +1,5 @@
+export type ViewMode = 'list' | 'detail' | 'edit';
+
+export interface SettingRef {
+    handleSave: () => Promise<void>;
+}
diff --git a/lib/types/spell.ts b/lib/types/spell.ts
new file mode 100644
index 0000000..78d9f72
--- /dev/null
+++ b/lib/types/spell.ts
@@ -0,0 +1,58 @@
+export interface SpellTagProps {
+    id: string;
+    name: string;
+    color: string | null;
+}
+
+export interface SpellProps {
+    id: string;
+    name: string;
+    description: string;
+    appearance: string;
+    tags: string[];
+    powerLevel: string | null;
+    components: string | null;
+    limitations: string | null;
+    notes: string | null;
+    seriesSpellId?: string | null;
+}
+
+export interface SpellPropsPost {
+    id?: string;
+    name: string;
+    description: string;
+    appearance: string;
+    tags: string[];
+    powerLevel?: string | null;
+    components?: string | null;
+    limitations?: string | null;
+    notes?: string | null;
+    seriesSpellId?: string | null;
+}
+
+export interface SpellListItem {
+    id: string;
+    name: string;
+    description: string;
+    tags: SpellTagProps[];
+    seriesSpellId?: string | null;
+}
+
+export interface SpellListResponse {
+    enabled: boolean;
+    spells: SpellListItem[];
+    tags: SpellTagProps[];
+}
+
+export interface SpellEditState {
+    id: string | null;
+    name: string;
+    description: string;
+    appearance: string;
+    tags: string[];
+    powerLevel: string | null;
+    components: string | null;
+    limitations: string | null;
+    notes: string | null;
+    seriesSpellId?: string | null;
+}
diff --git a/lib/types/story.ts b/lib/types/story.ts
new file mode 100644
index 0000000..8c6bb5d
--- /dev/null
+++ b/lib/types/story.ts
@@ -0,0 +1,29 @@
+import {ChapterListProps} from "@/lib/types/chapter";
+import {Act, Issue} from "@/lib/types/book";
+
+export interface StoryProps {
+    mainChapter: ChapterListProps[];
+    acts: Act[];
+    issues: Issue[];
+}
+
+export interface VerbalTimeProps {
+    actions: string;
+    descriptions: string;
+    dialogues: string;
+    thoughts: string;
+    summary: string;
+}
+
+export interface DialogueProps {
+    description: string;
+    example: string;
+}
+
+export interface GeneratedShortStory {
+    title: string;
+    short: string;
+    resume: string;
+    totalPrice: number;
+    totalTokens: number;
+}
diff --git a/lib/models/SyncedBook.ts b/lib/types/synced-book.ts
similarity index 82%
rename from lib/models/SyncedBook.ts
rename to lib/types/synced-book.ts
index a9c63c8..b016798 100644
--- a/lib/models/SyncedBook.ts
+++ b/lib/types/synced-book.ts
@@ -1,392 +1,338 @@
-export interface SyncedBookTools {
-    lastUpdate: number;
-}
-
-export interface SyncedBook {
-    id: string;
-    type: string;
-    title: string;
-    subTitle: string | null;
-    seriesId: string | null;
-    lastUpdate: number;
-    chapters: SyncedChapter[];
-    characters: SyncedCharacter[];
-    locations: SyncedLocation[];
-    worlds: SyncedWorld[];
-    incidents: SyncedIncident[];
-    plotPoints: SyncedPlotPoint[];
-    issues: SyncedIssue[];
-    actSummaries: SyncedActSummary[];
-    guideLine: SyncedGuideLine | null;
-    aiGuideLine: SyncedAIGuideLine | null;
-    bookTools: SyncedBookTools | null;
-    spells: SyncedSpell[];
-    spellTags: SyncedSpellTag[];
-}
-
-export interface SyncedChapter {
-    id: string;
-    name: string;
-    lastUpdate: number;
-    contents: SyncedChapterContent[];
-    info: SyncedChapterInfo | null;
-}
-
-export interface SyncedChapterContent {
-    id: string;
-    lastUpdate: number;
-}
-
-export interface SyncedChapterInfo {
-    id: string;
-    lastUpdate: number;
-}
-
-export interface SyncedCharacter {
-    id: string;
-    name: string;
-    lastUpdate: number;
-    attributes: SyncedCharacterAttribute[];
-}
-
-export interface SyncedCharacterAttribute {
-    id: string;
-    name: string;
-    lastUpdate: number;
-}
-
-export interface SyncedLocation {
-    id: string;
-    name: string;
-    lastUpdate: number;
-    elements: SyncedLocationElement[];
-}
-
-export interface SyncedLocationElement {
-    id: string;
-    name: string;
-    lastUpdate: number;
-    subElements: SyncedLocationSubElement[];
-}
-
-export interface SyncedLocationSubElement {
-    id: string;
-    name: string;
-    lastUpdate: number;
-}
-
-export interface SyncedWorld {
-    id: string;
-    name: string;
-    lastUpdate: number;
-    elements: SyncedWorldElement[];
-}
-
-export interface SyncedWorldElement {
-    id: string;
-    name: string;
-    lastUpdate: number;
-}
-
-export interface SyncedIncident {
-    id: string;
-    name: string;
-    lastUpdate: number;
-}
-
-export interface SyncedPlotPoint {
-    id: string;
-    name: string;
-    lastUpdate: number;
-}
-
-export interface SyncedIssue {
-    id: string;
-    name: string;
-    lastUpdate: number;
-}
-
-export interface SyncedActSummary {
-    id: string;
-    lastUpdate: number;
-}
-
-export interface SyncedGuideLine {
-    lastUpdate: number;
-}
-
-export interface SyncedAIGuideLine {
-    lastUpdate: number;
-}
-
-export interface SyncedSpell {
-    id: string;
-    name: string;
-    lastUpdate: number;
-}
-
-export interface SyncedSpellTag {
-    id: string;
-    name: string;
-    lastUpdate: number;
-}
-
-export interface BookSyncCompare {
-    id: string;
-    chapters: string[];
-    chapterContents: string[];
-    chapterInfos: string[];
-    characters: string[];
-    characterAttributes: string[];
-    locations: string[];
-    locationElements: string[];
-    locationSubElements: string[];
-    worlds: string[];
-    worldElements: string[];
-    incidents: string[];
-    plotPoints: string[];
-    issues: string[];
-    actSummaries: string[];
-    guideLine: boolean;
-    aiGuideLine: boolean;
-    bookTools: boolean;
-    spells: string[];
-    spellTags: string[];
-}
-
-export function compareBookSyncs(newerBook: SyncedBook, olderBook: SyncedBook): BookSyncCompare | null {
-    const changedChapterIds: string[] = [];
-    const changedChapterContentIds: string[] = [];
-    const changedChapterInfoIds: string[] = [];
-    const changedCharacterIds: string[] = [];
-    const changedCharacterAttributeIds: string[] = [];
-    const changedLocationIds: string[] = [];
-    const changedLocationElementIds: string[] = [];
-    const changedLocationSubElementIds: string[] = [];
-    const changedWorldIds: string[] = [];
-    const changedWorldElementIds: string[] = [];
-    const changedIncidentIds: string[] = [];
-    const changedPlotPointIds: string[] = [];
-    const changedIssueIds: string[] = [];
-    const changedActSummaryIds: string[] = [];
-    const changedSpellIds: string[] = [];
-    const changedSpellTagIds: string[] = [];
-    let guideLineChanged: boolean = false;
-    let aiGuideLineChanged: boolean = false;
-    let bookToolsChanged: boolean = false;
-
-    newerBook.chapters.forEach((newerChapter: SyncedChapter): void => {
-        const olderChapter: SyncedChapter | undefined = olderBook.chapters.find((chapter: SyncedChapter): boolean => chapter.id === newerChapter.id);
-
-        if (!olderChapter) {
-            changedChapterIds.push(newerChapter.id);
-            newerChapter.contents.forEach((content: SyncedChapterContent): void => {
-                changedChapterContentIds.push(content.id);
-            });
-            if (newerChapter.info) {
-                changedChapterInfoIds.push(newerChapter.info.id);
-            }
-        } else if (newerChapter.lastUpdate > olderChapter.lastUpdate) {
-            changedChapterIds.push(newerChapter.id);
-        } else {
-            newerChapter.contents.forEach((newerContent: SyncedChapterContent): void => {
-                const olderContent: SyncedChapterContent | undefined = olderChapter.contents.find((content: SyncedChapterContent): boolean => content.id === newerContent.id);
-                if (!olderContent || newerContent.lastUpdate > olderContent.lastUpdate) {
-                    changedChapterContentIds.push(newerContent.id);
-                }
-            });
-
-            if (newerChapter.info && olderChapter.info) {
-                if (newerChapter.info.lastUpdate > olderChapter.info.lastUpdate) {
-                    changedChapterInfoIds.push(newerChapter.info.id);
-                }
-            } else if (newerChapter.info && !olderChapter.info) {
-                changedChapterInfoIds.push(newerChapter.info.id);
-            }
-        }
-    });
-
-    newerBook.characters.forEach((newerCharacter: SyncedCharacter): void => {
-        const olderCharacter: SyncedCharacter | undefined = olderBook.characters.find((character: SyncedCharacter): boolean => character.id === newerCharacter.id);
-
-        if (!olderCharacter) {
-            changedCharacterIds.push(newerCharacter.id);
-            newerCharacter.attributes.forEach((attribute: SyncedCharacterAttribute): void => {
-                changedCharacterAttributeIds.push(attribute.id);
-            });
-        } else if (newerCharacter.lastUpdate > olderCharacter.lastUpdate) {
-            changedCharacterIds.push(newerCharacter.id);
-        } else {
-            newerCharacter.attributes.forEach((newerAttribute: SyncedCharacterAttribute): void => {
-                const olderAttribute: SyncedCharacterAttribute | undefined = olderCharacter.attributes.find((attribute: SyncedCharacterAttribute): boolean => attribute.id === newerAttribute.id);
-                if (!olderAttribute || newerAttribute.lastUpdate > olderAttribute.lastUpdate) {
-                    changedCharacterAttributeIds.push(newerAttribute.id);
-                }
-            });
-        }
-    });
-
-    newerBook.locations.forEach((newerLocation: SyncedLocation): void => {
-        const olderLocation: SyncedLocation | undefined = olderBook.locations.find((location: SyncedLocation): boolean => location.id === newerLocation.id);
-
-        if (!olderLocation) {
-            changedLocationIds.push(newerLocation.id);
-            newerLocation.elements.forEach((element: SyncedLocationElement): void => {
-                changedLocationElementIds.push(element.id);
-                element.subElements.forEach((subElement: SyncedLocationSubElement): void => {
-                    changedLocationSubElementIds.push(subElement.id);
-                });
-            });
-        } else if (newerLocation.lastUpdate > olderLocation.lastUpdate) {
-            changedLocationIds.push(newerLocation.id);
-        } else {
-            newerLocation.elements.forEach((newerElement: SyncedLocationElement): void => {
-                const olderElement: SyncedLocationElement | undefined = olderLocation.elements.find((element: SyncedLocationElement): boolean => element.id === newerElement.id);
-
-                if (!olderElement) {
-                    changedLocationElementIds.push(newerElement.id);
-                    newerElement.subElements.forEach((subElement: SyncedLocationSubElement): void => {
-                        changedLocationSubElementIds.push(subElement.id);
-                    });
-                } else if (newerElement.lastUpdate > olderElement.lastUpdate) {
-                    changedLocationElementIds.push(newerElement.id);
-                } else {
-                    newerElement.subElements.forEach((newerSubElement: SyncedLocationSubElement): void => {
-                        const olderSubElement: SyncedLocationSubElement | undefined = olderElement.subElements.find((subElement: SyncedLocationSubElement): boolean => subElement.id === newerSubElement.id);
-                        if (!olderSubElement || newerSubElement.lastUpdate > olderSubElement.lastUpdate) {
-                            changedLocationSubElementIds.push(newerSubElement.id);
-                        }
-                    });
-                }
-            });
-        }
-    });
-
-    newerBook.worlds.forEach((newerWorld: SyncedWorld): void => {
-        const olderWorld: SyncedWorld | undefined = olderBook.worlds.find((world: SyncedWorld): boolean => world.id === newerWorld.id);
-
-        if (!olderWorld) {
-            changedWorldIds.push(newerWorld.id);
-            newerWorld.elements.forEach((element: SyncedWorldElement): void => {
-                changedWorldElementIds.push(element.id);
-            });
-        } else if (newerWorld.lastUpdate > olderWorld.lastUpdate) {
-            changedWorldIds.push(newerWorld.id);
-        } else {
-            newerWorld.elements.forEach((newerElement: SyncedWorldElement): void => {
-                const olderElement: SyncedWorldElement | undefined = olderWorld.elements.find((element: SyncedWorldElement): boolean => element.id === newerElement.id);
-                if (!olderElement || newerElement.lastUpdate > olderElement.lastUpdate) {
-                    changedWorldElementIds.push(newerElement.id);
-                }
-            });
-        }
-    });
-
-    newerBook.incidents.forEach((newerIncident: SyncedIncident): void => {
-        const olderIncident: SyncedIncident | undefined = olderBook.incidents.find((incident: SyncedIncident): boolean => incident.id === newerIncident.id);
-        if (!olderIncident || newerIncident.lastUpdate > olderIncident.lastUpdate) {
-            changedIncidentIds.push(newerIncident.id);
-        }
-    });
-
-    newerBook.plotPoints.forEach((newerPlotPoint: SyncedPlotPoint): void => {
-        const olderPlotPoint: SyncedPlotPoint | undefined = olderBook.plotPoints.find((plotPoint: SyncedPlotPoint): boolean => plotPoint.id === newerPlotPoint.id);
-        if (!olderPlotPoint || newerPlotPoint.lastUpdate > olderPlotPoint.lastUpdate) {
-            changedPlotPointIds.push(newerPlotPoint.id);
-        }
-    });
-
-    newerBook.issues.forEach((newerIssue: SyncedIssue): void => {
-        const olderIssue: SyncedIssue | undefined = olderBook.issues.find((issue: SyncedIssue): boolean => issue.id === newerIssue.id);
-        if (!olderIssue || newerIssue.lastUpdate > olderIssue.lastUpdate) {
-            changedIssueIds.push(newerIssue.id);
-        }
-    });
-
-    newerBook.actSummaries.forEach((newerActSummary: SyncedActSummary): void => {
-        const olderActSummary: SyncedActSummary | undefined = olderBook.actSummaries.find((actSummary: SyncedActSummary): boolean => actSummary.id === newerActSummary.id);
-        if (!olderActSummary || newerActSummary.lastUpdate > olderActSummary.lastUpdate) {
-            changedActSummaryIds.push(newerActSummary.id);
-        }
-    });
-
-    if (newerBook.guideLine && olderBook.guideLine) {
-        guideLineChanged = newerBook.guideLine.lastUpdate > olderBook.guideLine.lastUpdate;
-    } else if (newerBook.guideLine && !olderBook.guideLine) {
-        guideLineChanged = true;
-    }
-
-    if (newerBook.aiGuideLine && olderBook.aiGuideLine) {
-        aiGuideLineChanged = newerBook.aiGuideLine.lastUpdate > olderBook.aiGuideLine.lastUpdate;
-    } else if (newerBook.aiGuideLine && !olderBook.aiGuideLine) {
-        aiGuideLineChanged = true;
-    }
-
-    if (newerBook.bookTools && olderBook.bookTools) {
-        bookToolsChanged = newerBook.bookTools.lastUpdate > olderBook.bookTools.lastUpdate;
-    } else if (newerBook.bookTools && !olderBook.bookTools) {
-        bookToolsChanged = true;
-    }
-
-    newerBook.spellTags.forEach((newerSpellTag: SyncedSpellTag): void => {
-        const olderSpellTag: SyncedSpellTag | undefined = olderBook.spellTags.find((spellTag: SyncedSpellTag): boolean => spellTag.id === newerSpellTag.id);
-        if (!olderSpellTag || newerSpellTag.lastUpdate > olderSpellTag.lastUpdate) {
-            changedSpellTagIds.push(newerSpellTag.id);
-        }
-    });
-
-    newerBook.spells.forEach((newerSpell: SyncedSpell): void => {
-        const olderSpell: SyncedSpell | undefined = olderBook.spells.find((spell: SyncedSpell): boolean => spell.id === newerSpell.id);
-        if (!olderSpell || newerSpell.lastUpdate > olderSpell.lastUpdate) {
-            changedSpellIds.push(newerSpell.id);
-        }
-    });
-
-    const hasChanges: boolean =
-        changedChapterIds.length > 0 ||
-        changedChapterContentIds.length > 0 ||
-        changedChapterInfoIds.length > 0 ||
-        changedCharacterIds.length > 0 ||
-        changedCharacterAttributeIds.length > 0 ||
-        changedLocationIds.length > 0 ||
-        changedLocationElementIds.length > 0 ||
-        changedLocationSubElementIds.length > 0 ||
-        changedWorldIds.length > 0 ||
-        changedWorldElementIds.length > 0 ||
-        changedIncidentIds.length > 0 ||
-        changedPlotPointIds.length > 0 ||
-        changedIssueIds.length > 0 ||
-        changedActSummaryIds.length > 0 ||
-        changedSpellIds.length > 0 ||
-        changedSpellTagIds.length > 0 ||
-        guideLineChanged ||
-        aiGuideLineChanged ||
-        bookToolsChanged;
-
-    if (!hasChanges) {
-        return null;
-    }
-
-    return {
-        id: newerBook.id,
-        chapters: changedChapterIds,
-        chapterContents: changedChapterContentIds,
-        chapterInfos: changedChapterInfoIds,
-        characters: changedCharacterIds,
-        characterAttributes: changedCharacterAttributeIds,
-        locations: changedLocationIds,
-        locationElements: changedLocationElementIds,
-        locationSubElements: changedLocationSubElementIds,
-        worlds: changedWorldIds,
-        worldElements: changedWorldElementIds,
-        incidents: changedIncidentIds,
-        plotPoints: changedPlotPointIds,
-        issues: changedIssueIds,
-        actSummaries: changedActSummaryIds,
-        guideLine: guideLineChanged,
-        aiGuideLine: aiGuideLineChanged,
-        bookTools: bookToolsChanged,
-        spells: changedSpellIds,
-        spellTags: changedSpellTagIds
-    };
-}
\ No newline at end of file
+export interface SyncedBook {
+    id: string;
+    type: string;
+    title: string;
+    subTitle: string | null;
+    seriesId: string | null;
+    lastUpdate: number;
+    chapters: SyncedChapter[];
+    characters: SyncedCharacter[];
+    locations: SyncedLocation[];
+    worlds: SyncedWorld[];
+    incidents: SyncedIncident[];
+    plotPoints: SyncedPlotPoint[];
+    issues: SyncedIssue[];
+    actSummaries: SyncedActSummary[];
+    guideLine: SyncedGuideLine | null;
+    aiGuideLine: SyncedAIGuideLine | null;
+    bookTools: SyncedBookTools | null;
+    spells: SyncedSpell[];
+    spellTags: SyncedSpellTag[];
+}
+
+export interface SyncedChapter {
+    id: string;
+    name: string;
+    lastUpdate: number;
+    contents: SyncedChapterContent[];
+    info: SyncedChapterInfo | null;
+}
+
+export interface SyncedChapterContent {
+    id: string;
+    lastUpdate: number;
+}
+
+export interface SyncedChapterInfo {
+    id: string;
+    lastUpdate: number;
+}
+
+export interface SyncedCharacter {
+    id: string;
+    name: string;
+    lastUpdate: number;
+    attributes: SyncedCharacterAttribute[];
+}
+
+export interface SyncedCharacterAttribute {
+    id: string;
+    name: string;
+    lastUpdate: number;
+}
+
+export interface SyncedLocation {
+    id: string;
+    name: string;
+    lastUpdate: number;
+    elements: SyncedLocationElement[];
+}
+
+export interface SyncedLocationElement {
+    id: string;
+    name: string;
+    lastUpdate: number;
+    subElements: SyncedLocationSubElement[];
+}
+
+export interface SyncedLocationSubElement {
+    id: string;
+    name: string;
+    lastUpdate: number;
+}
+
+export interface SyncedWorld {
+    id: string;
+    name: string;
+    lastUpdate: number;
+    elements: SyncedWorldElement[];
+}
+
+export interface SyncedWorldElement {
+    id: string;
+    name: string;
+    lastUpdate: number;
+}
+
+export interface SyncedIncident {
+    id: string;
+    name: string;
+    lastUpdate: number;
+}
+
+export interface SyncedPlotPoint {
+    id: string;
+    name: string;
+    lastUpdate: number;
+}
+
+export interface SyncedIssue {
+    id: string;
+    name: string;
+    lastUpdate: number;
+}
+
+export interface SyncedActSummary {
+    id: string;
+    lastUpdate: number;
+}
+
+export interface SyncedGuideLine {
+    lastUpdate: number;
+}
+
+export interface SyncedAIGuideLine {
+    lastUpdate: number;
+}
+
+export interface SyncedBookTools {
+    lastUpdate: number;
+}
+
+export interface SyncedSpell {
+    id: string;
+    name: string;
+    lastUpdate: number;
+}
+
+export interface SyncedSpellTag {
+    id: string;
+    name: string;
+    lastUpdate: number;
+}
+
+export interface BookSyncCompare {
+    id: string;
+    chapters: string[];
+    chapterContents: string[];
+    chapterInfos: string[];
+    characters: string[];
+    characterAttributes: string[];
+    locations: string[];
+    locationElements: string[];
+    locationSubElements: string[];
+    worlds: string[];
+    worldElements: string[];
+    incidents: string[];
+    plotPoints: string[];
+    issues: string[];
+    actSummaries: string[];
+    guideLine: boolean;
+    aiGuideLine: boolean;
+    bookTools: boolean;
+    spells: string[];
+    spellTags: string[];
+}
+
+export function compareBookSyncs(newerBook: SyncedBook, olderBook: SyncedBook): BookSyncCompare | null {
+    const changedChapterIds: string[] = [];
+    const changedChapterContentIds: string[] = [];
+    const changedChapterInfoIds: string[] = [];
+    const changedCharacterIds: string[] = [];
+    const changedCharacterAttributeIds: string[] = [];
+    const changedLocationIds: string[] = [];
+    const changedLocationElementIds: string[] = [];
+    const changedLocationSubElementIds: string[] = [];
+    const changedWorldIds: string[] = [];
+    const changedWorldElementIds: string[] = [];
+    const changedIncidentIds: string[] = [];
+    const changedPlotPointIds: string[] = [];
+    const changedIssueIds: string[] = [];
+    const changedActSummaryIds: string[] = [];
+    const changedSpellIds: string[] = [];
+    const changedSpellTagIds: string[] = [];
+    let guideLineChanged: boolean = false;
+    let aiGuideLineChanged: boolean = false;
+    let bookToolsChanged: boolean = false;
+
+    newerBook.chapters.forEach((newerChapter: SyncedChapter): void => {
+        const olderChapter: SyncedChapter | undefined = olderBook.chapters.find((chapter: SyncedChapter): boolean => chapter.id === newerChapter.id);
+        if (!olderChapter) {
+            changedChapterIds.push(newerChapter.id);
+            newerChapter.contents.forEach((content: SyncedChapterContent): void => { changedChapterContentIds.push(content.id); });
+            if (newerChapter.info) { changedChapterInfoIds.push(newerChapter.info.id); }
+        } else if (newerChapter.lastUpdate > olderChapter.lastUpdate) {
+            changedChapterIds.push(newerChapter.id);
+        } else {
+            newerChapter.contents.forEach((newerContent: SyncedChapterContent): void => {
+                const olderContent: SyncedChapterContent | undefined = olderChapter.contents.find((content: SyncedChapterContent): boolean => content.id === newerContent.id);
+                if (!olderContent || newerContent.lastUpdate > olderContent.lastUpdate) { changedChapterContentIds.push(newerContent.id); }
+            });
+            if (newerChapter.info && olderChapter.info) {
+                if (newerChapter.info.lastUpdate > olderChapter.info.lastUpdate) { changedChapterInfoIds.push(newerChapter.info.id); }
+            } else if (newerChapter.info && !olderChapter.info) {
+                changedChapterInfoIds.push(newerChapter.info.id);
+            }
+        }
+    });
+
+    newerBook.characters.forEach((newerCharacter: SyncedCharacter): void => {
+        const olderCharacter: SyncedCharacter | undefined = olderBook.characters.find((character: SyncedCharacter): boolean => character.id === newerCharacter.id);
+        if (!olderCharacter) {
+            changedCharacterIds.push(newerCharacter.id);
+            newerCharacter.attributes.forEach((attribute: SyncedCharacterAttribute): void => { changedCharacterAttributeIds.push(attribute.id); });
+        } else if (newerCharacter.lastUpdate > olderCharacter.lastUpdate) {
+            changedCharacterIds.push(newerCharacter.id);
+        } else {
+            newerCharacter.attributes.forEach((newerAttribute: SyncedCharacterAttribute): void => {
+                const olderAttribute: SyncedCharacterAttribute | undefined = olderCharacter.attributes.find((attribute: SyncedCharacterAttribute): boolean => attribute.id === newerAttribute.id);
+                if (!olderAttribute || newerAttribute.lastUpdate > olderAttribute.lastUpdate) { changedCharacterAttributeIds.push(newerAttribute.id); }
+            });
+        }
+    });
+
+    newerBook.locations.forEach((newerLocation: SyncedLocation): void => {
+        const olderLocation: SyncedLocation | undefined = olderBook.locations.find((location: SyncedLocation): boolean => location.id === newerLocation.id);
+        if (!olderLocation) {
+            changedLocationIds.push(newerLocation.id);
+            newerLocation.elements.forEach((element: SyncedLocationElement): void => {
+                changedLocationElementIds.push(element.id);
+                element.subElements.forEach((subElement: SyncedLocationSubElement): void => { changedLocationSubElementIds.push(subElement.id); });
+            });
+        } else if (newerLocation.lastUpdate > olderLocation.lastUpdate) {
+            changedLocationIds.push(newerLocation.id);
+        } else {
+            newerLocation.elements.forEach((newerElement: SyncedLocationElement): void => {
+                const olderElement: SyncedLocationElement | undefined = olderLocation.elements.find((element: SyncedLocationElement): boolean => element.id === newerElement.id);
+                if (!olderElement) {
+                    changedLocationElementIds.push(newerElement.id);
+                    newerElement.subElements.forEach((subElement: SyncedLocationSubElement): void => { changedLocationSubElementIds.push(subElement.id); });
+                } else if (newerElement.lastUpdate > olderElement.lastUpdate) {
+                    changedLocationElementIds.push(newerElement.id);
+                } else {
+                    newerElement.subElements.forEach((newerSubElement: SyncedLocationSubElement): void => {
+                        const olderSubElement: SyncedLocationSubElement | undefined = olderElement.subElements.find((subElement: SyncedLocationSubElement): boolean => subElement.id === newerSubElement.id);
+                        if (!olderSubElement || newerSubElement.lastUpdate > olderSubElement.lastUpdate) { changedLocationSubElementIds.push(newerSubElement.id); }
+                    });
+                }
+            });
+        }
+    });
+
+    newerBook.worlds.forEach((newerWorld: SyncedWorld): void => {
+        const olderWorld: SyncedWorld | undefined = olderBook.worlds.find((world: SyncedWorld): boolean => world.id === newerWorld.id);
+        if (!olderWorld) {
+            changedWorldIds.push(newerWorld.id);
+            newerWorld.elements.forEach((element: SyncedWorldElement): void => { changedWorldElementIds.push(element.id); });
+        } else if (newerWorld.lastUpdate > olderWorld.lastUpdate) {
+            changedWorldIds.push(newerWorld.id);
+        } else {
+            newerWorld.elements.forEach((newerElement: SyncedWorldElement): void => {
+                const olderElement: SyncedWorldElement | undefined = olderWorld.elements.find((element: SyncedWorldElement): boolean => element.id === newerElement.id);
+                if (!olderElement || newerElement.lastUpdate > olderElement.lastUpdate) { changedWorldElementIds.push(newerElement.id); }
+            });
+        }
+    });
+
+    newerBook.incidents.forEach((newerIncident: SyncedIncident): void => {
+        const olderIncident: SyncedIncident | undefined = olderBook.incidents.find((incident: SyncedIncident): boolean => incident.id === newerIncident.id);
+        if (!olderIncident || newerIncident.lastUpdate > olderIncident.lastUpdate) { changedIncidentIds.push(newerIncident.id); }
+    });
+
+    newerBook.plotPoints.forEach((newerPlotPoint: SyncedPlotPoint): void => {
+        const olderPlotPoint: SyncedPlotPoint | undefined = olderBook.plotPoints.find((plotPoint: SyncedPlotPoint): boolean => plotPoint.id === newerPlotPoint.id);
+        if (!olderPlotPoint || newerPlotPoint.lastUpdate > olderPlotPoint.lastUpdate) { changedPlotPointIds.push(newerPlotPoint.id); }
+    });
+
+    newerBook.issues.forEach((newerIssue: SyncedIssue): void => {
+        const olderIssue: SyncedIssue | undefined = olderBook.issues.find((issue: SyncedIssue): boolean => issue.id === newerIssue.id);
+        if (!olderIssue || newerIssue.lastUpdate > olderIssue.lastUpdate) { changedIssueIds.push(newerIssue.id); }
+    });
+
+    newerBook.actSummaries.forEach((newerActSummary: SyncedActSummary): void => {
+        const olderActSummary: SyncedActSummary | undefined = olderBook.actSummaries.find((actSummary: SyncedActSummary): boolean => actSummary.id === newerActSummary.id);
+        if (!olderActSummary || newerActSummary.lastUpdate > olderActSummary.lastUpdate) { changedActSummaryIds.push(newerActSummary.id); }
+    });
+
+    if (newerBook.guideLine && olderBook.guideLine) {
+        guideLineChanged = newerBook.guideLine.lastUpdate > olderBook.guideLine.lastUpdate;
+    } else if (newerBook.guideLine && !olderBook.guideLine) {
+        guideLineChanged = true;
+    }
+
+    if (newerBook.aiGuideLine && olderBook.aiGuideLine) {
+        aiGuideLineChanged = newerBook.aiGuideLine.lastUpdate > olderBook.aiGuideLine.lastUpdate;
+    } else if (newerBook.aiGuideLine && !olderBook.aiGuideLine) {
+        aiGuideLineChanged = true;
+    }
+
+    if (newerBook.bookTools && olderBook.bookTools) {
+        bookToolsChanged = newerBook.bookTools.lastUpdate > olderBook.bookTools.lastUpdate;
+    } else if (newerBook.bookTools && !olderBook.bookTools) {
+        bookToolsChanged = true;
+    }
+
+    newerBook.spellTags.forEach((newerSpellTag: SyncedSpellTag): void => {
+        const olderSpellTag: SyncedSpellTag | undefined = olderBook.spellTags.find((spellTag: SyncedSpellTag): boolean => spellTag.id === newerSpellTag.id);
+        if (!olderSpellTag || newerSpellTag.lastUpdate > olderSpellTag.lastUpdate) { changedSpellTagIds.push(newerSpellTag.id); }
+    });
+
+    newerBook.spells.forEach((newerSpell: SyncedSpell): void => {
+        const olderSpell: SyncedSpell | undefined = olderBook.spells.find((spell: SyncedSpell): boolean => spell.id === newerSpell.id);
+        if (!olderSpell || newerSpell.lastUpdate > olderSpell.lastUpdate) { changedSpellIds.push(newerSpell.id); }
+    });
+
+    const hasChanges: boolean =
+        changedChapterIds.length > 0 || changedChapterContentIds.length > 0 || changedChapterInfoIds.length > 0 ||
+        changedCharacterIds.length > 0 || changedCharacterAttributeIds.length > 0 ||
+        changedLocationIds.length > 0 || changedLocationElementIds.length > 0 || changedLocationSubElementIds.length > 0 ||
+        changedWorldIds.length > 0 || changedWorldElementIds.length > 0 ||
+        changedIncidentIds.length > 0 || changedPlotPointIds.length > 0 || changedIssueIds.length > 0 || changedActSummaryIds.length > 0 ||
+        changedSpellIds.length > 0 || changedSpellTagIds.length > 0 ||
+        guideLineChanged || aiGuideLineChanged || bookToolsChanged;
+
+    if (!hasChanges) { return null; }
+
+    return {
+        id: newerBook.id,
+        chapters: changedChapterIds,
+        chapterContents: changedChapterContentIds,
+        chapterInfos: changedChapterInfoIds,
+        characters: changedCharacterIds,
+        characterAttributes: changedCharacterAttributeIds,
+        locations: changedLocationIds,
+        locationElements: changedLocationElementIds,
+        locationSubElements: changedLocationSubElementIds,
+        worlds: changedWorldIds,
+        worldElements: changedWorldElementIds,
+        incidents: changedIncidentIds,
+        plotPoints: changedPlotPointIds,
+        issues: changedIssueIds,
+        actSummaries: changedActSummaryIds,
+        guideLine: guideLineChanged,
+        aiGuideLine: aiGuideLineChanged,
+        bookTools: bookToolsChanged,
+        spells: changedSpellIds,
+        spellTags: changedSpellTagIds
+    };
+}
diff --git a/lib/models/SyncedSeries.ts b/lib/types/synced-series.ts
similarity index 100%
rename from lib/models/SyncedSeries.ts
rename to lib/types/synced-series.ts
diff --git a/lib/types/user.ts b/lib/types/user.ts
new file mode 100644
index 0000000..edd66a9
--- /dev/null
+++ b/lib/types/user.ts
@@ -0,0 +1,36 @@
+export interface Author {
+    id: string;
+    name: string;
+}
+
+export interface UserProps {
+    id: string;
+    username: string;
+    authorName?: string;
+    email?: string;
+    accountVerified?: boolean;
+    termsAccepted?: boolean;
+    aiUsage: number;
+    apiKeys: {
+        gemini: boolean;
+        openai: boolean;
+        anthropic: boolean;
+    };
+    guideTour?: GuideTour[];
+    subscription?: Subscription[];
+    writingLang: number | null;
+    writingLevel: number | null;
+    ritePoints: number;
+    creditsBalance: number;
+    groupId: number;
+}
+
+export interface GuideTour {
+    [key: string]: boolean;
+}
+
+export interface Subscription {
+    subType: string;
+    subTier: number;
+    status: boolean;
+}
diff --git a/lib/types/world.ts b/lib/types/world.ts
new file mode 100644
index 0000000..d5ce771
--- /dev/null
+++ b/lib/types/world.ts
@@ -0,0 +1,57 @@
+import {LucideIcon} from 'lucide-react';
+
+export interface ElementSection {
+    title: string;
+    section: WorldElementSection;
+    icon: LucideIcon;
+}
+
+export interface WorldElement {
+    id: string;
+    name: string;
+    description: string;
+}
+
+export type WorldElementSection =
+    'laws'
+    | 'biomes'
+    | 'issues'
+    | 'customs'
+    | 'kingdoms'
+    | 'climate'
+    | 'resources'
+    | 'wildlife'
+    | 'arts'
+    | 'ethnicGroups'
+    | 'socialClasses'
+    | 'importantCharacters';
+
+export type WorldTextField = 'name' | 'history' | 'politics' | 'economy' | 'religion' | 'languages';
+
+export interface WorldProps {
+    id: string;
+    name: string;
+    history: string;
+    politics: string;
+    economy: string;
+    religion: string;
+    languages: string;
+    laws: WorldElement[];
+    biomes: WorldElement[];
+    issues: WorldElement[];
+    customs: WorldElement[];
+    kingdoms: WorldElement[];
+    climate: WorldElement[];
+    resources: WorldElement[];
+    wildlife: WorldElement[];
+    arts: WorldElement[];
+    ethnicGroups: WorldElement[];
+    socialClasses: WorldElement[];
+    importantCharacters: WorldElement[];
+    seriesWorldId?: string | null;
+}
+
+export interface WorldListResponse {
+    worlds: WorldProps[];
+    enabled: boolean;
+}
diff --git a/lib/utils/book.ts b/lib/utils/book.ts
new file mode 100644
index 0000000..625a5df
--- /dev/null
+++ b/lib/utils/book.ts
@@ -0,0 +1,28 @@
+import {SelectBoxProps} from "@/components/form/SelectBox";
+import {SyncedBook} from "@/lib/types/synced-book";
+
+export function booksToSelectBox(books: SyncedBook[]): SelectBoxProps[] {
+    return books.map((book: SyncedBook): SelectBoxProps => {
+        return {
+            label: book.title,
+            value: book.id,
+        };
+    });
+}
+
+export function getBookTypeLabel(value: string): string {
+    switch (value) {
+        case 'short':
+            return 'bookTypes.short';
+        case 'novelette':
+            return 'bookTypes.novelette';
+        case 'long':
+            return 'bookTypes.novella';
+        case 'chapbook':
+            return 'bookTypes.chapbook';
+        case 'novel':
+            return 'bookTypes.novel';
+        default:
+            return 'bookTypes.novel';
+    }
+}
diff --git a/lib/utils/cookies.ts b/lib/utils/cookies.ts
new file mode 100644
index 0000000..f02c2c4
--- /dev/null
+++ b/lib/utils/cookies.ts
@@ -0,0 +1,33 @@
+export function getCookie(name: string): string | null {
+    const nameEQ: string = `${name}=`;
+    const allCookies: string[] = document.cookie.split(';');
+    for (let i: number = 0; i < allCookies.length; i++) {
+        let cookie: string = allCookies[i];
+        while (cookie.charAt(0) === ' ') cookie = cookie.substring(1, cookie.length);
+        if (cookie.indexOf(nameEQ) === 0) return cookie.substring(nameEQ.length, cookie.length);
+    }
+    return null;
+}
+
+export function setCookie(name: string, value: string, days: number): void {
+    const date: Date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    const expires: string = `expires=${date.toUTCString()}`;
+    let domain: string = '';
+    if (!/localhost|127\.0\.0\.1/.test(window.location.hostname)) {
+        domain = `domain=${window.location.hostname};`;
+    }
+    const secure: string = 'Secure;';
+    const sameSite: string = 'SameSite=Strict;';
+    document.cookie = `${name}=${value}; ${expires}; ${domain} path=/; ${secure} ${sameSite}`;
+}
+
+export function removeCookie(name: string): void {
+    let domain: string = '';
+    if (!/localhost|127\.0\.0\.1/.test(window.location.hostname)) {
+        domain = `domain=${window.location.hostname};`;
+    }
+    const secure: string = 'Secure;';
+    const sameSite: string = 'SameSite=Strict;';
+    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; ${domain} path=/; ${secure} ${sameSite}`;
+}
diff --git a/lib/utils/dynamicStyles.ts b/lib/utils/dynamicStyles.ts
new file mode 100644
index 0000000..4773300
--- /dev/null
+++ b/lib/utils/dynamicStyles.ts
@@ -0,0 +1,75 @@
+const styleMap: Map<string, string> = new Map();
+let sheet: CSSStyleSheet | null = null;
+
+function getSheet(): CSSStyleSheet {
+    if (!sheet) {
+        sheet = new CSSStyleSheet();
+        document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+    }
+    return sheet;
+}
+
+function sanitizeForClassName(value: string): string {
+    return value.replace(/[^a-zA-Z0-9]/g, '');
+}
+
+export function dynamicBg(color: string): string {
+    const key: string = `bg-${color}`;
+    if (styleMap.has(key)) return styleMap.get(key)!;
+    
+    const className: string = `dyn-bg-${sanitizeForClassName(color)}`;
+    getSheet().insertRule(`.${className} { background-color: ${color}; }`, getSheet().cssRules.length);
+    styleMap.set(key, className);
+    return className;
+}
+
+export function dynamicText(color: string): string {
+    const key: string = `text-${color}`;
+    if (styleMap.has(key)) return styleMap.get(key)!;
+    
+    const className: string = `dyn-text-${sanitizeForClassName(color)}`;
+    getSheet().insertRule(`.${className} { color: ${color}; }`, getSheet().cssRules.length);
+    styleMap.set(key, className);
+    return className;
+}
+
+export function dynamicBorder(color: string, side: string = ''): string {
+    const prop: string = side ? `border-${side}-color` : 'border-color';
+    const key: string = `border-${side}-${color}`;
+    if (styleMap.has(key)) return styleMap.get(key)!;
+    
+    const className: string = `dyn-border-${side ? side + '-' : ''}${sanitizeForClassName(color)}`;
+    getSheet().insertRule(`.${className} { ${prop}: ${color}; }`, getSheet().cssRules.length);
+    styleMap.set(key, className);
+    return className;
+}
+
+export function dynamicBgWithOpacity(hexColor: string, opacityHex: string): string {
+    const key: string = `bg-${hexColor}-${opacityHex}`;
+    if (styleMap.has(key)) return styleMap.get(key)!;
+    
+    const className: string = `dyn-bg-${sanitizeForClassName(hexColor)}-${opacityHex}`;
+    getSheet().insertRule(`.${className} { background-color: ${hexColor}${opacityHex}; }`, getSheet().cssRules.length);
+    styleMap.set(key, className);
+    return className;
+}
+
+export function dynamicBorderWithOpacity(hexColor: string, opacityHex: string): string {
+    const key: string = `border-${hexColor}-${opacityHex}`;
+    if (styleMap.has(key)) return styleMap.get(key)!;
+    
+    const className: string = `dyn-border-${sanitizeForClassName(hexColor)}-${opacityHex}`;
+    getSheet().insertRule(`.${className} { border-color: ${hexColor}${opacityHex}; }`, getSheet().cssRules.length);
+    styleMap.set(key, className);
+    return className;
+}
+
+export function dynamicBorderLeft(color: string, width: string = '3px'): string {
+    const key: string = `bl-${width}-${color}`;
+    if (styleMap.has(key)) return styleMap.get(key)!;
+    
+    const className: string = `dyn-bl-${sanitizeForClassName(color)}`;
+    getSheet().insertRule(`.${className} { border-left: ${width} solid ${color}; }`, getSheet().cssRules.length);
+    styleMap.set(key, className);
+    return className;
+}
diff --git a/lib/utils/editor.ts b/lib/utils/editor.ts
new file mode 100644
index 0000000..dfc4d17
--- /dev/null
+++ b/lib/utils/editor.ts
@@ -0,0 +1,6 @@
+export function convertToHtml(text: string): string {
+    return text
+        .split(/\n\s*\n/)
+        .map((paragraph: string): string => `<p>${paragraph.trim()}</p>`)
+        .join('');
+}
diff --git a/lib/utils/html.ts b/lib/utils/html.ts
new file mode 100644
index 0000000..5feb556
--- /dev/null
+++ b/lib/utils/html.ts
@@ -0,0 +1,27 @@
+export function formatHTMLContent(htmlContent: string): string {
+    return htmlContent
+        .replace(/<h1>/g, '<h1 style="color: var(--color-text-primary); text-indent: 5px; font-size: 28px; font-weight: bold; text-align: left; margin-vertical: 10px;">')
+        .replace(/<p>/g, '<p style="color: var(--color-editor-text); text-indent: 30px; font-size: 16px; line-height: 22px; margin-vertical: 5px;">')
+        .replace(/<blockquote>/g, '<blockquote style="border-left-width: 4px; border-left-color: var(--color-gray-light); padding-left: 10px; font-style: italic; color: var(--color-text-dimmed);">');
+}
+
+export function textContentToHtml(content: string): string {
+    const paragraphs: string[] = content
+        .split(/\n+/)
+        .map((paragraph: string) => paragraph.trim())
+        .filter((paragraph: string) => paragraph.length > 0);
+    
+    return paragraphs
+        .map((paragraph: string) => `<p>${paragraph}</p>`)
+        .join('');
+}
+
+export function htmlToText(html: string): string {
+    return html
+        .replace(/<br\s*\/?>/gi, '\n')
+        .replace(/<\/?(p|h[1-6]|div)(\s+[^>]*)?>/gi, '\n')
+        .replace(/<\/?[^>]+(>|$)/g, '')
+        .replace(/(\n\s*){2,}/g, '\n\n')
+        .replace(/^\s+|\s+$|(?<=\s)\s+/g, '')
+        .trim();
+}
diff --git a/lib/utils/quillsense.ts b/lib/utils/quillsense.ts
new file mode 100644
index 0000000..6617d6a
--- /dev/null
+++ b/lib/utils/quillsense.ts
@@ -0,0 +1,41 @@
+import {SessionProps} from "@/lib/types/session";
+import {Subscription} from "@/lib/types/user";
+import {getCurrentSubscription} from "@/lib/utils/user";
+
+export function getSubLevel(session: SessionProps): number {
+    let currentSub: Subscription | null = getCurrentSubscription(session?.user, 'quill-sense');
+    if (!currentSub) {
+        currentSub = getCurrentSubscription(session?.user, 'quill-trial');
+        if (!currentSub) {
+            return 0;
+        }
+    }
+    switch (currentSub?.subTier) {
+        case 1:
+            return 1;
+        case 2:
+            return 2;
+        case 3:
+            return 3;
+        default:
+            return 0;
+    }
+}
+
+export function isBringYourKeys(session: SessionProps): boolean {
+    if (!session?.user) return false;
+    const currentSub: Subscription | null = getCurrentSubscription(session?.user, 'use-your-keys');
+    return currentSub?.status || session.user.groupId <= 4;
+}
+
+export function isGeminiEnabled(session: SessionProps): boolean {
+    return session.user?.apiKeys.gemini || false;
+}
+
+export function isAnthropicEnabled(session: SessionProps): boolean {
+    return session.user?.apiKeys.anthropic || false;
+}
+
+export function isOpenAIEnabled(session: SessionProps): boolean {
+    return session.user?.apiKeys.openai || false;
+}
diff --git a/lib/utils/story.ts b/lib/utils/story.ts
new file mode 100644
index 0000000..c086ed6
--- /dev/null
+++ b/lib/utils/story.ts
@@ -0,0 +1,430 @@
+import {Dispatch, SetStateAction} from "react";
+import {VerbalTimeProps} from "@/lib/types/story";
+
+export function getVerbesStyle(verbalTimeValue: number, level: number): VerbalTimeProps {
+    switch (verbalTimeValue) {
+        case 1:
+            return {
+                actions: level === 1 ? 'Passé composé' : 'Passé simple',
+                descriptions: 'Imparfait',
+                dialogues: 'Passé composé',
+                thoughts: level === 3 ? 'Subjonctif imparfait' : 'Plus-que-parfait',
+                summary: '→ Narrations épurées, style classique',
+            };
+        case 2:
+            return {
+                actions: 'Passé composé',
+                descriptions: level === 1 ? 'Imparfait' : level === 2 ? 'Imparfait + infinitifs' : 'Conditionnel présent',
+                dialogues: level === 1 ? 'Présent' : level === 2 ? 'Présent + impératif' : 'Impératif',
+                thoughts: level === 1 ? 'Futur proche' : level === 2 ? 'Conditionnel présent' : 'Subjonctif présent',
+                summary: '→ Témoignages, récits autobiographiques',
+            };
+        case 3:
+            return {
+                actions: level === 1 ? 'Plus-que-parfait' : 'Passé antérieur',
+                descriptions: level === 1 ? 'Imparfait' : level === 2 ? 'Plus-que-parfait' : 'Conditionnel passé',
+                dialogues: level === 3 ? 'Passé antérieur' : 'Passé simple',
+                thoughts: level === 1 ? 'Plus-que-parfait' : 'Subjonctif imparfait',
+                summary: '→ Flashbacks littéraires, tragédies',
+            };
+        case 4:
+            return {
+                actions: level === 1 ? 'Présent simple' : level === 2 ? 'Présent' : 'Présent + participe présent',
+                descriptions: level === 1 ? 'Participe présent' : level === 2 ? 'Participe présent + infinitifs' : 'Participes présents enchaînés',
+                dialogues: level === 1 ? 'Présent' : level === 2 ? 'Impératif' : 'Impératif + infinitifs',
+                thoughts: level === 1 ? 'Futur proche' : level === 2 ? 'Futur simple' : 'Futur antérieur',
+                summary: '→ Urgence, immersion totale',
+            };
+        case 5:
+            return {
+                actions: 'Présent',
+                descriptions: level === 1 ? 'Gérondif' : level === 2 ? 'Gérondif + infinitifs' : 'Gérondif + conditionnel',
+                dialogues: level === 1 ? 'Présent' : level === 2 ? 'Conditionnel présent' : 'Infinitif',
+                thoughts: level === 1 ? 'Infinitif' : 'Infinitif passé',
+                summary: '→ Méditations philosophiques',
+            };
+        case 6:
+            return {
+                actions: level === 1 ? 'Futur simple' : 'Futur antérieur',
+                descriptions: level === 1 ? 'Futur proche' : level === 2 ? 'Futur antérieur' : 'Futur antérieur',
+                dialogues: level === 1 ? 'Futur simple' : 'Futur proche',
+                thoughts: level === 1 ? 'Futur proche' : 'Futur antérieur',
+                summary: '→ Prophéties, plans stratégiques',
+            };
+        case 7:
+            return {
+                actions: level === 1 ? 'Futur simple' : 'Futur antérieur',
+                descriptions: level === 1 ? 'Futur proche' : level === 2 ? 'Futur simple + conditionnel' : 'Conditionnel passé',
+                dialogues: level === 1 ? 'Futur proche' : level === 2 ? 'Futur antérieur' : 'Futur simple',
+                thoughts: level === 1 ? 'Futur simple' : level === 2 ? 'Conditionnel passé' : 'Futur antérieur',
+                summary: '→ Dystopies, récits post-apocalyptiques',
+            };
+        case 8:
+            return {
+                actions: 'Imparfait',
+                descriptions: level === 1 ? 'Imparfait' : level === 2 ? 'Conditionnel présent' : 'Conditionnel passé',
+                dialogues: level === 1 ? 'Présent' : level === 2 ? 'Infinitif' : 'Infinitifs',
+                thoughts: level === 1 ? 'Subjonctif présent' : level === 2 ? 'Subjonctif imparfait' : 'Subjonctif imparfait',
+                summary: '→ Rêves, souvenirs déformés',
+            };
+        case 9:
+            return {
+                actions: 'Conditionnel présent',
+                descriptions: 'Conditionnel passé',
+                dialogues: 'Subjonctif imparfait',
+                thoughts: level === 3 ? 'Subjonctif imparfait' : 'Plus-que-parfait',
+                summary: '→ Uchronies, réalités alternatives',
+            };
+        case 10:
+            return {
+                actions: level === 1 ? 'Subjonctif présent' : 'Subjonctif imparfait',
+                descriptions: level === 1 ? 'Subjonctif présent' : 'Subjonctif imparfait',
+                dialogues: 'Impératif',
+                thoughts: level === 3 ? 'Subjonctif imparfait' : 'Conditionnel passé',
+                summary: '→ Drames psychologiques, dilemmes',
+            };
+        case 11:
+            return {
+                actions: 'Passé composé',
+                descriptions: 'Imparfait',
+                dialogues: 'Plus-que-parfait',
+                thoughts: 'Infinitif passé',
+                summary: '→ Regrets, introspection nostalgique',
+            };
+        case 12:
+            return {
+                actions: 'Présent',
+                descriptions: level === 1 ? 'Passé composé' : 'Passé composé + futur antérieur',
+                dialogues: level === 1 ? 'Futur proche' : 'Futur antérieur',
+                thoughts: 'Participe présent',
+                summary: '→ Crise en cours, compte à rebours',
+            };
+        case 13:
+            return {
+                actions: level === 1 ? 'Présent simple' : level === 2 ? 'Présent + participe présent' : 'Participes présents enchaînés',
+                descriptions: level === 1 ? 'Imparfait' : level === 2 ? 'Participe présent + adjectifs' : 'Subjonctif présent',
+                dialogues: level === 1 ? 'Présent' : level === 2 ? 'Conditionnel présent' : 'Subjonctif présent',
+                thoughts: level === 1 ? 'Infinitif' : level === 2 ? 'Infinitif passé' : 'Subjonctif imparfait',
+                summary: '→ Émotions intenses, introspections vives (romances, drames psychologiques)',
+            };
+        case 14:
+            return {
+                actions: 'Présent',
+                descriptions: level === 1 ? 'Gérondif' : level === 2 ? 'Gérondif + infinitifs' : 'Conditionnel présent',
+                dialogues: level === 1 ? 'Présent' : level === 2 ? 'Impératif' : 'Infinitif',
+                thoughts: level === 1 ? 'Infinitif' : level === 2 ? 'Infinitif passé' : 'Subjonctif imparfait',
+                summary: '→ Réflexions profondes, analyse des émotions (nouvelles philosophiques, récits introspectifs)',
+            };
+        case 15:
+            return {
+                actions: level === 1 ? 'Présent simple' : level === 2 ? 'Présent + passé simple' : 'Présent + passé antérieur',
+                descriptions: level === 1 ? 'Imparfait' : level === 2 ? 'Passé composé' : 'Conditionnel passé',
+                dialogues: level === 1 ? 'Présent' : level === 2 ? 'Passé simple' : 'Futur antérieur',
+                thoughts: level === 1 ? 'Infinitif' : level === 2 ? 'Plus-que-parfait' : 'Subjonctif imparfait',
+                summary: '→ Histoires historiques avec une intensité immédiate (batailles, moments décisifs)',
+            };
+        case 16:
+            return {
+                actions: level === 1 ? 'Passé composé' : level === 2 ? 'Imparfait + passé simple' : 'Plus-que-parfait',
+                descriptions: level === 1 ? 'Imparfait' : level === 2 ? 'Participe passé' : 'Conditionnel passé',
+                dialogues: level === 1 ? 'Présent' : level === 2 ? 'Imparfait' : 'Subjonctif imparfait',
+                thoughts: level === 1 ? 'Infinitif' : level === 2 ? 'Infinitif passé' : 'Subjonctif présent',
+                summary: '→ Récits introspectifs, auto-analyse (autofictions, récits de croissance personnelle)',
+            };
+        case 17:
+            return {
+                actions: level === 1 ? 'Futur simple' : level === 2 ? 'Futur antérieur' : 'Conditionnel passé',
+                descriptions: level === 1 ? 'Futur proche' : level === 2 ? 'Futur antérieur' : 'Conditionnel présent',
+                dialogues: level === 1 ? 'Futur simple' : level === 2 ? 'Futur antérieur' : 'Subjonctif présent',
+                thoughts: level === 1 ? 'Infinitif' : level === 2 ? 'Futur antérieur' : 'Conditionnel passé',
+                summary: '→ Prophéties, visions apocalyptiques (récits mystiques, romans de science-fiction)',
+            };
+        case 18:
+            return {
+                actions: level === 1 ? 'Conditionnel présent' : level === 2 ? 'Conditionnel passé' : 'Subjonctif imparfait',
+                descriptions: level === 1 ? 'Conditionnel présent' : level === 2 ? 'Conditionnel passé' : 'Subjonctif présent',
+                dialogues: level === 1 ? 'Conditionnel présent' : level === 2 ? 'Subjonctif imparfait' : 'Impératif',
+                thoughts: level === 1 ? 'Infinitif' : level === 2 ? 'Infinitif passé' : 'Subjonctif imparfait',
+                summary: '→ Mondes parallèles, uchronies (romans alternatifs, récits de fantasy)',
+            };
+        case 19:
+            return {
+                actions: level === 1 ? 'Imparfait' : level === 2 ? 'Imparfait + participe présent' : 'Participes présents enchaînés',
+                descriptions: level === 1 ? 'Imparfait' : level === 2 ? 'Participe présent + adjectifs' : 'Subjonctif présent',
+                dialogues: level === 1 ? 'Présent' : level === 2 ? 'Imparfait' : 'Subjonctif imparfait',
+                thoughts: level === 1 ? 'Infinitif' : level === 2 ? 'Infinitif passé' : 'Subjonctif présent',
+                summary: '→ Lyrisme, poésie narrative (récits oniriques, nouvelles littéraires)',
+            };
+        case 20:
+            return {
+                actions: level === 1 ? 'Présent simple' : level === 2 ? 'Imparfait' : 'Futur simple',
+                descriptions: level === 1 ? 'Imparfait' : level === 2 ? 'Participe présent' : 'Conditionnel présent',
+                dialogues: level === 1 ? 'Présent' : level === 2 ? 'Imparfait' : 'Futur proche',
+                thoughts: level === 1 ? 'Infinitif' : level === 2 ? 'Plus-que-parfait' : 'Subjonctif présent',
+                summary: '→ Immersion totale (récits interactifs, jeux de rôle, romans à choix multiples)',
+            };
+        default:
+            return {
+                actions: 'Passé simple',
+                descriptions: 'Imparfait',
+                dialogues: 'Passé composé',
+                thoughts: 'Plus-que-parfait',
+                summary: '→ Narrations épurées, style classique',
+            };
+    }
+}
+
+export function presetStoryType(
+    presetType: string,
+    setTone: Dispatch<SetStateAction<string>>,
+    setAtmosphere: Dispatch<SetStateAction<string>>,
+    setVerbTense: Dispatch<SetStateAction<string>>,
+    setPerson: Dispatch<SetStateAction<string>>,
+    setDialogueType: Dispatch<SetStateAction<string>>,
+    setIsExplicit: Dispatch<SetStateAction<boolean>>,
+): void {
+    switch (presetType) {
+        case '1':
+            setTone('Suspense angoissant, mystère troublant');
+            setAtmosphere('Tension oppressante, ombres menaçantes');
+            setVerbTense('3');
+            setPerson('1');
+            setDialogueType('3');
+            setIsExplicit(false);
+            break;
+        case '2':
+            setTone('Brutalité crue, terreur psychologique');
+            setAtmosphere('Claustrophobie, clair-obscur sinistre');
+            setVerbTense('10');
+            setPerson('4');
+            setDialogueType('4');
+            setIsExplicit(true);
+            break;
+        case '3':
+            setTone('Magie envoûtante, innocence poétique');
+            setAtmosphere('Forêt luminescente, brume enchantée');
+            setVerbTense('19');
+            setPerson('3');
+            setDialogueType('1');
+            setIsExplicit(false);
+            break;
+        case '4':
+            setTone('Froidure technologique, désespoir systémique');
+            setAtmosphere('Métal rouillé, lumières néon vacillantes');
+            setVerbTense('7');
+            setPerson('5');
+            setDialogueType('3');
+            setIsExplicit(false);
+            break;
+        case '5':
+            setTone('Passion tourmentée, mélancolie sensuelle');
+            setAtmosphere('Pluie fine, chambres aux rideaux lourds');
+            setVerbTense('13');
+            setPerson('1');
+            setDialogueType('1');
+            setIsExplicit(true);
+            break;
+        case '6':
+            setTone('Héroïsme grandiose, dangers exaltants');
+            setAtmosphere('Vastes paysages, ruines anciennes');
+            setVerbTense('4');
+            setPerson('6');
+            setDialogueType('3');
+            setIsExplicit(false);
+            break;
+        case '7':
+            setTone('Méditation existentielle, questions sans réponses');
+            setAtmosphere('Bibliothèque poussiéreuse, nuit silencieuse');
+            setVerbTense('5');
+            setPerson('5');
+            setDialogueType('4');
+            setIsExplicit(true);
+            break;
+        case '8':
+            setTone('Tension psychologique, suspense mental');
+            setAtmosphere('Isolation, paranoïa croissante');
+            setVerbTense('10');
+            setPerson('4');
+            setDialogueType('4');
+            setIsExplicit(true);
+            break;
+        case '9':
+            setTone('Mystère obscur, surnaturel inquiétant');
+            setAtmosphere('Forêts sombres, créatures cachées');
+            setVerbTense('3');
+            setPerson('1');
+            setDialogueType('3');
+            setIsExplicit(false);
+            break;
+        case '10':
+            setTone('Amour interdit, passion à travers les âges');
+            setAtmosphere('Châteaux majestueux, bals somptueux');
+            setVerbTense('1');
+            setPerson('3');
+            setDialogueType('1');
+            setIsExplicit(true);
+            break;
+        case '11':
+            setTone('Dure réalité, enquête sombre');
+            setAtmosphere('Rues sombres, ambiance de crime');
+            setVerbTense('16');
+            setPerson('5');
+            setDialogueType('4');
+            setIsExplicit(true);
+            break;
+        case '12':
+            setTone('Espoir futuriste, société idéale');
+            setAtmosphere('Villes lumineuses, technologie avancée');
+            setVerbTense('6');
+            setPerson('4');
+            setDialogueType('3');
+            setIsExplicit(false);
+            break;
+        case '13':
+            setTone('Magie contemporaine, réalisme enchanté');
+            setAtmosphere('Ville moderne, éléments féeriques');
+            setVerbTense('4');
+            setPerson('1');
+            setDialogueType('1');
+            setIsExplicit(true);
+            break;
+        case '14':
+            setTone('Conflits émotionnels, relations complexes');
+            setAtmosphere('Intérieur chaleureux, tensions sous-jacentes');
+            setVerbTense('13');
+            setPerson('1');
+            setDialogueType('1');
+            setIsExplicit(true);
+            break;
+        case '15':
+            setTone('Exploration audacieuse, dangers marins');
+            setAtmosphere('Océan infini, navires anciens');
+            setVerbTense('4');
+            setPerson('6');
+            setDialogueType('3');
+            setIsExplicit(false);
+            break;
+        case '16':
+            setTone('Quête héroïque, magie puissante');
+            setAtmosphere('Mondes imaginaires, créatures mythiques');
+            setVerbTense('19');
+            setPerson('3');
+            setDialogueType('1');
+            setIsExplicit(true);
+            break;
+        case '17':
+            setTone('Amour moderne, relations actuelles');
+            setAtmosphere('Ville animée, cafés cosy');
+            setVerbTense('13');
+            setPerson('1');
+            setDialogueType('1');
+            setIsExplicit(true);
+            break;
+        case '18':
+            setTone("Intrigue internationale, secrets d'État");
+            setAtmosphere('Villes étrangères, tensions diplomatiques');
+            setVerbTense('16');
+            setPerson('5');
+            setDialogueType('4');
+            setIsExplicit(true);
+            break;
+        case '19':
+            setTone('Survie désespérée, monde en ruines');
+            setAtmosphere('Paysages dévastés, ressources rares');
+            setVerbTense('7');
+            setPerson('4');
+            setDialogueType('3');
+            setIsExplicit(false);
+            break;
+        case '20':
+            setTone('Leçons de vie, valeurs profondes');
+            setAtmosphere('Village paisible, nature environnante');
+            setVerbTense('1');
+            setPerson('3');
+            setDialogueType('1');
+            setIsExplicit(true);
+            break;
+    }
+}
+
+export function getNarrativePerson(value: number, level: number): string {
+    if (level === 1) {
+        switch (value) {
+            case 1:
+                return 'Première personne (Je acteur) - Parfait pour les débuts (ex: Je marchais)';
+            case 3:
+                return 'Troisième omnisciente - Narration globale (ex: Il marchait)';
+            default:
+                return 'Première personne';
+        }
+    } else if (level === 2) {
+        switch (value) {
+            case 1:
+                return 'Première personne (Je acteur)';
+            case 2:
+                return 'Première personne (Je témoin) - Observateur (ex: Je le regardais marcher)';
+            case 3:
+                return 'Troisième omnisciente';
+            case 4:
+                return 'Troisième limitée - Focus sur un personnage (ex: Il marchait, ignorant le danger)';
+            default:
+                return 'Première personne';
+        }
+    } else if (level === 3) {
+        switch (value) {
+            case 1:
+                return 'Première personne (Je acteur)';
+            case 2:
+                return 'Première personne (Je témoin)';
+            case 3:
+                return 'Troisième omnisciente';
+            case 4:
+                return 'Troisième limitée';
+            case 5:
+                return 'Deuxième personne (Tu) - Immersion forte (ex: Tu marches vers la mort)';
+            case 6:
+                return 'Nous collectif - Voix chorale (ex: Nous marchions, unis par le destin)';
+            default:
+                return 'Troisième omnisciente';
+        }
+    }
+    return 'Première personne';
+}
+
+export function getDialogueType(value: number, level: number): string {
+    if (level === 1) {
+        switch (value) {
+            case 1:
+                return 'Dialogue direct - Paroles exactes (ex: "Je t\'aime !")';
+            case 2:
+                return 'Dialogue indirect - Résumé par le narrateur (ex: Il dit qu\'il m\'aime)';
+            default:
+                return 'Dialogue direct';
+        }
+    } else if (level === 2) {
+        switch (value) {
+            case 1:
+                return 'Dialogue direct';
+            case 2:
+                return 'Dialogue indirect';
+            case 3:
+                return 'Dialogue mixte (ex: "Je t\'aime" dit-il, puis explique ses sentiments)';
+            default:
+                return 'Dialogue direct';
+        }
+    } else if (level === 3) {
+        switch (value) {
+            case 1:
+                return 'Dialogue direct';
+            case 2:
+                return 'Dialogue indirect';
+            case 3:
+                return 'Dialogue mixte';
+            case 4:
+                return 'Monologue intérieur (ex: *Je ne peux pas le perdre...*)';
+            default:
+                return 'Dialogue direct';
+        }
+    }
+    return 'Dialogue direct';
+}
diff --git a/lib/utils/syncComparison.ts b/lib/utils/syncComparison.ts
index be43771..01ac537 100644
--- a/lib/utils/syncComparison.ts
+++ b/lib/utils/syncComparison.ts
@@ -16,7 +16,7 @@ import {
     SyncedActSummary,
     SyncedGuideLine,
     SyncedAIGuideLine
-} from "@/lib/models/SyncedBook";
+} from "@/lib/types/synced-book";
 
 /**
  * Résultat de comparaison pour un livre
diff --git a/lib/utils/time.ts b/lib/utils/time.ts
new file mode 100644
index 0000000..80a9276
--- /dev/null
+++ b/lib/utils/time.ts
@@ -0,0 +1,3 @@
+export function timeStampInSeconds(): number {
+    return Math.floor(new Date().getTime() / 1000);
+}
diff --git a/lib/utils/tiptap.ts b/lib/utils/tiptap.ts
new file mode 100644
index 0000000..750bfa0
--- /dev/null
+++ b/lib/utils/tiptap.ts
@@ -0,0 +1,140 @@
+import {TiptapAttrValue, TiptapLinkAttrs, TiptapNode} from "@/lib/types/chapter";
+
+function isTiptapLinkAttrs(value: TiptapAttrValue): value is TiptapLinkAttrs {
+    return typeof value === 'object' && value !== null && 'href' in value;
+}
+
+export function getPageCount(text: string): number {
+    const charactersPerLine: number = 90;
+    const linesPerPage: number = 40;
+    
+    const lines: string[] = text.split('\n');
+    let totalLines: number = 0;
+    
+    lines.forEach((line: string) => {
+        const lineLength: number = line.length;
+        const estimatedLines: number = Math.ceil(lineLength / charactersPerLine);
+        totalLines += estimatedLines;
+    });
+    
+    return Math.ceil(totalLines / linesPerPage);
+}
+
+export function convertTiptapToHTML(node: TiptapNode): string {
+    let html: string = '';
+    
+    switch (node.type) {
+        case 'doc':
+            if (node.content) {
+                node.content.forEach((childNode: TiptapNode) => {
+                    html += convertTiptapToHTML(childNode);
+                });
+            }
+            break;
+        
+        case 'paragraph':
+            html += '<p>';
+            if (node.content) {
+                node.content.forEach((childNode: TiptapNode) => {
+                    html += convertTiptapToHTML(childNode);
+                });
+            }
+            html += '</p>';
+            break;
+        
+        case 'text':
+            let textContent: string = node.text || '';
+            
+            if (node.attrs) {
+                if (node.attrs.bold) {
+                    textContent = `<strong>${textContent}</strong>`;
+                }
+                if (node.attrs.italic) {
+                    textContent = `<em>${textContent}</em>`;
+                }
+                if (node.attrs.underline) {
+                    textContent = `<u>${textContent}</u>`;
+                }
+                if (node.attrs.strike) {
+                    textContent = `<s>${textContent}</s>`;
+                }
+                if (node.attrs.link && isTiptapLinkAttrs(node.attrs.link)) {
+                    textContent = `<a href="${node.attrs.link.href}">${textContent}</a>`;
+                }
+            }
+            
+            html += textContent;
+            break;
+        
+        case 'heading':
+            const level: number = typeof node.attrs?.level === 'number' ? node.attrs.level : 1;
+            html += `<h${level}>`;
+            if (node.content) {
+                node.content.forEach((childNode: TiptapNode) => {
+                    html += convertTiptapToHTML(childNode);
+                });
+            }
+            html += `</h${level}>`;
+            break;
+        
+        case 'bulletList':
+            html += '<ul>';
+            if (node.content) {
+                node.content.forEach((childNode: TiptapNode) => {
+                    html += convertTiptapToHTML(childNode);
+                });
+            }
+            html += '</ul>';
+            break;
+        
+        case 'orderedList':
+            html += '<ol>';
+            if (node.content) {
+                node.content.forEach((childNode: TiptapNode) => {
+                    html += convertTiptapToHTML(childNode);
+                });
+            }
+            html += '</ol>';
+            break;
+        
+        case 'listItem':
+            html += '<li>';
+            if (node.content) {
+                node.content.forEach((childNode: TiptapNode) => {
+                    html += convertTiptapToHTML(childNode);
+                });
+            }
+            html += '</li>';
+            break;
+        
+        case 'blockquote':
+            html += '<blockquote>';
+            if (node.content) {
+                node.content.forEach((childNode: TiptapNode) => {
+                    html += convertTiptapToHTML(childNode);
+                });
+            }
+            html += '</blockquote>';
+            break;
+        
+        case 'codeBlock':
+            html += '<pre><code>';
+            if (node.content) {
+                node.content.forEach((childNode: TiptapNode) => {
+                    html += convertTiptapToHTML(childNode);
+                });
+            }
+            html += '</code></pre>';
+            break;
+        
+        default:
+            if (node.content) {
+                node.content.forEach((childNode: TiptapNode) => {
+                    html += convertTiptapToHTML(childNode);
+                });
+            }
+            break;
+    }
+    
+    return html;
+}
diff --git a/lib/utils/user.ts b/lib/utils/user.ts
new file mode 100644
index 0000000..1529a57
--- /dev/null
+++ b/lib/utils/user.ts
@@ -0,0 +1,44 @@
+import {GuideTour, Subscription, UserProps} from "@/lib/types/user";
+import {SessionProps} from "@/lib/types/session";
+
+export function getCurrentSubscription(user: UserProps | null, type: "quill-sense" | "use-your-keys" | "quill-trial"): Subscription | null {
+    if (!user || !user.subscription || user.subscription.length === 0) {
+        return null;
+    }
+    return user.subscription.find((sub: Subscription): boolean => {
+        return sub.subType === type && sub.status;
+    }) || null;
+}
+
+export function getWritingLevel(level: number): string {
+    switch (level) {
+        case 1:
+            return 'Débutant';
+        case 2:
+            return 'Intermédiaire';
+        case 3:
+            return 'Avancé';
+        default:
+            return 'Débutant';
+    }
+}
+
+export function guideTourDone(guide: GuideTour[], tour: string): boolean {
+    if (!guide || !tour) return false;
+    return guide.find((guide: GuideTour): boolean => guide[tour]) === undefined;
+}
+
+export function setNewGuideTour(session: SessionProps, tour: string): SessionProps {
+    if (!session.user) return session;
+    const newGuideTour: GuideTour[] = [
+        ...(session.user.guideTour ?? []),
+        {[tour]: true}
+    ];
+    return {
+        ...session,
+        user: {
+            ...session.user,
+            guideTour: newGuideTour
+        }
+    };
+}
diff --git a/lib/utils/validation.ts b/lib/utils/validation.ts
new file mode 100644
index 0000000..897580f
--- /dev/null
+++ b/lib/utils/validation.ts
@@ -0,0 +1,4 @@
+export function verifyInput(input: string): boolean {
+    const pattern: RegExp = new RegExp('(<.*?>)|(&.*?;)|({.*?})', 'gmi');
+    return pattern.test(input);
+}
diff --git a/package-lock.json b/package-lock.json
index 78e9ed2..573ba70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,6 @@
       "version": "0.4.1",
       "license": "ISC",
       "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^7.1.0",
-        "@fortawesome/free-brands-svg-icons": "^7.1.0",
-        "@fortawesome/free-regular-svg-icons": "^7.1.0",
-        "@fortawesome/free-solid-svg-icons": "^7.1.0",
-        "@fortawesome/react-fontawesome": "^3.1.0",
         "@tailwindcss/postcss": "^4.1.17",
         "@tauri-apps/api": "^2.10.1",
         "@tauri-apps/plugin-shell": "^2.3.5",
@@ -25,20 +20,24 @@
         "@tiptap/react": "^3.10.7",
         "@tiptap/starter-kit": "^3.10.7",
         "@types/bcrypt": "^6.0.0",
+        "@vitejs/plugin-react": "^6.0.1",
         "autoprefixer": "^10.4.22",
         "axios": "^1.13.2",
         "bcrypt": "^6.0.0",
         "docx": "^9.5.3",
         "electron-updater": "^6.7.3",
+        "i18next": "^25.10.4",
         "jszip": "^3.10.1",
-        "next": "^16.0.3",
-        "next-intl": "^4.5.3",
+        "lucide-react": "^0.577.0",
         "node-sqlite3-wasm": "^0.8.51",
         "pdfkit": "^0.17.2",
         "postcss": "^8.5.6",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
-        "tailwindcss": "^4.1.17"
+        "react-i18next": "^16.6.1",
+        "react-router-dom": "^7.13.1",
+        "tailwindcss": "^4.1.17",
+        "vite": "^8.0.1"
       },
       "devDependencies": {
         "@electron/notarize": "^3.1.1",
@@ -68,6 +67,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@develar/schema-utils": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/@develar/schema-utils/-/schema-utils-2.6.5.tgz",
@@ -470,6 +478,17 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz",
+      "integrity": "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
@@ -480,6 +499,16 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.0.tgz",
+      "integrity": "sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz",
@@ -508,137 +537,6 @@
       "license": "MIT",
       "optional": true
     },
-    "node_modules/@formatjs/ecma402-abstract": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-3.1.1.tgz",
-      "integrity": "sha512-jhZbTwda+2tcNrs4kKvxrPLPjx8QsBCLCUgrrJ/S+G9YrGHWLhAyFMMBHJBnBoOwuLHd7L14FgYudviKaxkO2Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@formatjs/fast-memoize": "3.1.0",
-        "@formatjs/intl-localematcher": "0.8.1",
-        "decimal.js": "^10.6.0",
-        "tslib": "^2.8.1"
-      }
-    },
-    "node_modules/@formatjs/ecma402-abstract/node_modules/@formatjs/intl-localematcher": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.8.1.tgz",
-      "integrity": "sha512-xwEuwQFdtSq1UKtQnyTZWC+eHdv7Uygoa+H2k/9uzBVQjDyp9r20LNDNKedWXll7FssT3GRHvqsdJGYSUWqYFA==",
-      "license": "MIT",
-      "dependencies": {
-        "@formatjs/fast-memoize": "3.1.0",
-        "tslib": "^2.8.1"
-      }
-    },
-    "node_modules/@formatjs/fast-memoize": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-3.1.0.tgz",
-      "integrity": "sha512-b5mvSWCI+XVKiz5WhnBCY3RJ4ZwfjAidU0yVlKa3d3MSgKmH1hC3tBGEAtYyN5mqL7N0G5x0BOUYyO8CEupWgg==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.8.1"
-      }
-    },
-    "node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-3.5.1.tgz",
-      "integrity": "sha512-sSDmSvmmoVQ92XqWb499KrIhv/vLisJU8ITFrx7T7NZHUmMY7EL9xgRowAosaljhqnj/5iufG24QrdzB6X3ItA==",
-      "license": "MIT",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "3.1.1",
-        "@formatjs/icu-skeleton-parser": "2.1.1",
-        "tslib": "^2.8.1"
-      }
-    },
-    "node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-2.1.1.tgz",
-      "integrity": "sha512-PSFABlcNefjI6yyk8f7nyX1DC7NHmq6WaCHZLySEXBrXuLOB2f935YsnzuPjlz+ibhb9yWTdPeVX1OVcj24w2Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "3.1.1",
-        "tslib": "^2.8.1"
-      }
-    },
-    "node_modules/@formatjs/intl-localematcher": {
-      "version": "0.5.10",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.10.tgz",
-      "integrity": "sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "2"
-      }
-    },
-    "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.1.0.tgz",
-      "integrity": "sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.1.0.tgz",
-      "integrity": "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==",
-      "license": "MIT",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "7.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-7.1.0.tgz",
-      "integrity": "sha512-9byUd9bgNfthsZAjBl6GxOu1VPHgBuRUP9juI7ZoM98h8xNPTCTagfwUFyYscdZq4Hr7gD1azMfM9s5tIWKZZA==",
-      "license": "(CC-BY-4.0 AND MIT)",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "7.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-regular-svg-icons": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-7.1.0.tgz",
-      "integrity": "sha512-0e2fdEyB4AR+e6kU4yxwA/MonnYcw/CsMEP9lH82ORFi9svA6/RhDyhxIv5mlJaldmaHLLYVTb+3iEr+PDSZuQ==",
-      "license": "(CC-BY-4.0 AND MIT)",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "7.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.1.0.tgz",
-      "integrity": "sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==",
-      "license": "(CC-BY-4.0 AND MIT)",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "7.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/react-fontawesome": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-3.2.0.tgz",
-      "integrity": "sha512-E9Gu1hqd6JussVO26EC4WqRZssXMnQr2ol7ZNWkkFOH8jZUaxDJ9Z9WF9wIVkC+kJGXUdY3tlffpDwEKfgQrQw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20"
-      },
-      "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "~6 || ~7",
-        "react": "^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/@hapi/address": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-5.1.1.tgz",
@@ -693,472 +591,6 @@
         "@hapi/hoek": "^11.0.2"
       }
     },
-    "node_modules/@img/colour": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
-      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
-      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.2.4"
-      }
-    },
-    "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
-      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.2.4"
-      }
-    },
-    "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
-      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
-      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
-      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
-      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
-      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-riscv64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
-      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
-      "cpu": [
-        "riscv64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
-      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
-      "cpu": [
-        "s390x"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
-      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
-      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
-      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-linux-arm": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
-      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.2.4"
-      }
-    },
-    "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
-      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.2.4"
-      }
-    },
-    "node_modules/@img/sharp-linux-ppc64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
-      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
-      "cpu": [
-        "ppc64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-ppc64": "1.2.4"
-      }
-    },
-    "node_modules/@img/sharp-linux-riscv64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
-      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
-      "cpu": [
-        "riscv64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-riscv64": "1.2.4"
-      }
-    },
-    "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
-      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
-      "cpu": [
-        "s390x"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.2.4"
-      }
-    },
-    "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
-      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.2.4"
-      }
-    },
-    "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
-      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
-      }
-    },
-    "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
-      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
-      }
-    },
-    "node_modules/@img/sharp-wasm32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
-      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
-      "cpu": [
-        "wasm32"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/runtime": "^1.7.0"
-      },
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-win32-arm64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
-      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
-      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
-      "cpu": [
-        "ia32"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
-    "node_modules/@img/sharp-win32-x64": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
-      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0 AND LGPL-3.0-or-later",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      }
-    },
     "node_modules/@isaacs/balanced-match": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
@@ -1421,138 +853,20 @@
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/@next/env": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.6.tgz",
-      "integrity": "sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==",
-      "license": "MIT"
-    },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.6.tgz",
-      "integrity": "sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz",
+      "integrity": "sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==",
       "license": "MIT",
       "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.6.tgz",
-      "integrity": "sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.6.tgz",
-      "integrity": "sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.6.tgz",
-      "integrity": "sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.6.tgz",
-      "integrity": "sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.6.tgz",
-      "integrity": "sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.6.tgz",
-      "integrity": "sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.6.tgz",
-      "integrity": "sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
       }
     },
     "node_modules/@npmcli/agent": {
@@ -1605,307 +919,15 @@
         "node": ">=10"
       }
     },
-    "node_modules/@parcel/watcher": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
-      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
-      "hasInstallScript": true,
+    "node_modules/@oxc-project/types": {
+      "version": "0.120.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.120.0.tgz",
+      "integrity": "sha512-k1YNu55DuvAip/MGE1FTsIuU3FUCn6v/ujG9V7Nq5Df/kX2CWb13hhwD0lmJGMGqE+bE1MXvv9SZVnMzEXlWcg==",
       "license": "MIT",
-      "dependencies": {
-        "detect-libc": "^2.0.3",
-        "is-glob": "^4.0.3",
-        "node-addon-api": "^7.0.0",
-        "picomatch": "^4.0.3"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher-android-arm64": "2.5.6",
-        "@parcel/watcher-darwin-arm64": "2.5.6",
-        "@parcel/watcher-darwin-x64": "2.5.6",
-        "@parcel/watcher-freebsd-x64": "2.5.6",
-        "@parcel/watcher-linux-arm-glibc": "2.5.6",
-        "@parcel/watcher-linux-arm-musl": "2.5.6",
-        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
-        "@parcel/watcher-linux-arm64-musl": "2.5.6",
-        "@parcel/watcher-linux-x64-glibc": "2.5.6",
-        "@parcel/watcher-linux-x64-musl": "2.5.6",
-        "@parcel/watcher-win32-arm64": "2.5.6",
-        "@parcel/watcher-win32-ia32": "2.5.6",
-        "@parcel/watcher-win32-x64": "2.5.6"
+        "url": "https://github.com/sponsors/Boshen"
       }
     },
-    "node_modules/@parcel/watcher-android-arm64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
-      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-arm64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
-      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-x64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
-      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-freebsd-x64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
-      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-glibc": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
-      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-musl": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
-      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-glibc": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
-      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-musl": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
-      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-glibc": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
-      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-musl": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
-      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-arm64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
-      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-ia32": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
-      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
-      "cpu": [
-        "ia32"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-x64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
-      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher/node_modules/node-addon-api": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
-      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "license": "MIT"
-    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1923,10 +945,250 @@
       "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==",
       "license": "MIT"
     },
-    "node_modules/@schummar/icu-type-parser": {
-      "version": "1.21.5",
-      "resolved": "https://registry.npmjs.org/@schummar/icu-type-parser/-/icu-type-parser-1.21.5.tgz",
-      "integrity": "sha512-bXHSaW5jRTmke9Vd0h5P7BtWZG9Znqb8gSDxZnxaGSJnGwPLDPfS+3g0BKzeWqzgZPsIVZkM7m2tbo18cm5HBw==",
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.10.tgz",
+      "integrity": "sha512-jOHxwXhxmFKuXztiu1ORieJeTbx5vrTkcOkkkn2d35726+iwhrY1w/+nYY/AGgF12thg33qC3R1LMBF5tHTZHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.10.tgz",
+      "integrity": "sha512-gED05Teg/vtTZbIJBc4VNMAxAFDUPkuO/rAIyyxZjTj1a1/s6z5TII/5yMGZ0uLRCifEtwUQn8OlYzuYc0m70w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.10.tgz",
+      "integrity": "sha512-rI15NcM1mA48lqrIxVkHfAqcyFLcQwyXWThy+BQ5+mkKKPvSO26ir+ZDp36AgYoYVkqvMcdS8zOE6SeBsR9e8A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.10.tgz",
+      "integrity": "sha512-XZRXHdTa+4ME1MuDVp021+doQ+z6Ei4CCFmNc5/sKbqb8YmkiJdj8QKlV3rCI0AJtAeSB5n0WGPuJWNL9p/L2w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.10.tgz",
+      "integrity": "sha512-R0SQMRluISSLzFE20sPWYHVmJdDQnRyc/FzSCN72BqQmh2SOZUFG+N3/vBZpR4C6WpEUVYJLrYUXaj43sJsNLA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.10.tgz",
+      "integrity": "sha512-Y1reMrV/o+cwpduYhJuOE3OMKx32RMYCidf14y+HssARRmhDuWXJ4yVguDg2R/8SyyGNo+auzz64LnPK9Hq6jg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.10.tgz",
+      "integrity": "sha512-vELN+HNb2IzuzSBUOD4NHmP9yrGwl1DVM29wlQvx1OLSclL0NgVWnVDKl/8tEks79EFek/kebQKnNJkIAA4W2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.10.tgz",
+      "integrity": "sha512-ZqrufYTgzxbHwpqOjzSsb0UV/aV2TFIY5rP8HdsiPTv/CuAgCRjM6s9cYFwQ4CNH+hf9Y4erHW1GjZuZ7WoI7w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.10.tgz",
+      "integrity": "sha512-gSlmVS1FZJSRicA6IyjoRoKAFK7IIHBs7xJuHRSmjImqk3mPPWbR7RhbnfH2G6bcmMEllCt2vQ/7u9e6bBnByg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.10.tgz",
+      "integrity": "sha512-eOCKUpluKgfObT2pHjztnaWEIbUabWzk3qPZ5PuacuPmr4+JtQG4k2vGTY0H15edaTnicgU428XW/IH6AimcQw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.10.tgz",
+      "integrity": "sha512-Xdf2jQbfQowJnLcgYfD/m0Uu0Qj5OdxKallD78/IPPfzaiaI4KRAwZzHcKQ4ig1gtg1SuzC7jovNiM2TzQsBXA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.10.tgz",
+      "integrity": "sha512-o1hYe8hLi1EY6jgPFyxQgQ1wcycX+qz8eEbVmot2hFkgUzPxy9+kF0u0NIQBeDq+Mko47AkaFFaChcvZa9UX9Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.10.tgz",
+      "integrity": "sha512-Ugv9o7qYJudqQO5Y5y2N2SOo6S4WiqiNOpuQyoPInnhVzCY+wi/GHltcLHypG9DEUYMB0iTB/huJrpadiAcNcA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.10.tgz",
+      "integrity": "sha512-7UODQb4fQUNT/vmgDZBl3XOBAIOutP5R3O/rkxg0aLfEGQ4opbCgU5vOw/scPe4xOqBwL9fw7/RP1vAMZ6QlAQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.10.tgz",
+      "integrity": "sha512-PYxKHMVHOb5NJuDL53vBUl1VwUjymDcYI6rzpIni0C9+9mTiJedvUxSk7/RPp7OOAm3v+EjgMu9bIy3N6b408w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.7",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.7.tgz",
+      "integrity": "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA==",
       "license": "MIT"
     },
     "node_modules/@sindresorhus/is": {
@@ -1949,172 +1211,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.11.tgz",
-      "integrity": "sha512-QoIupRWVH8AF1TgxYyeA5nS18dtqMuxNwchjBIwJo3RdwLEFiJq6onOx9JAxHtuPwUkIVuU2Xbp+jCJ7Vzmgtg==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-darwin-x64": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.11.tgz",
-      "integrity": "sha512-S52Gu1QtPSfBYDiejlcfp9GlN+NjTZBRRNsz8PNwBgSE626/FUf2PcllVUix7jqkoMC+t0rS8t+2/aSWlMuQtA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.11.tgz",
-      "integrity": "sha512-lXJs8oXo6Z4yCpimpQ8vPeCjkgoHu5NoMvmJZ8qxDyU99KVdg6KwU9H79vzrmB+HfH+dCZ7JGMqMF//f8Cfvdg==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "Apache-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.11.tgz",
-      "integrity": "sha512-chRsz1K52/vj8Mfq/QOugVphlKPWlMh10V99qfH41hbGvwAU6xSPd681upO4bKiOr9+mRIZZW+EfJqY42ZzRyA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.11.tgz",
-      "integrity": "sha512-PYftgsTaGnfDK4m6/dty9ryK1FbLk+LosDJ/RJR2nkXGc8rd+WenXIlvHjWULiBVnS1RsjHHOXmTS4nDhe0v0w==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.11.tgz",
-      "integrity": "sha512-DKtnJKIHiZdARyTKiX7zdRjiDS1KihkQWatQiCHMv+zc2sfwb4Glrodx2VLOX4rsa92NLR0Sw8WLcPEMFY1szQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.11.tgz",
-      "integrity": "sha512-mUjjntHj4+8WBaiDe5UwRNHuEzLjIWBTSGTw0JT9+C9/Yyuh4KQqlcEQ3ro6GkHmBGXBFpGIj/o5VMyRWfVfWw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.11.tgz",
-      "integrity": "sha512-ZkNNG5zL49YpaFzfl6fskNOSxtcZ5uOYmWBkY4wVAvgbSAQzLRVBp+xArGWh2oXlY/WgL99zQSGTv7RI5E6nzA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.11.tgz",
-      "integrity": "sha512-6XnzORkZCQzvTQ6cPrU7iaT9+i145oLwnin8JrfsLG41wl26+5cNQ2XV3zcbrnFEV6esjOceom9YO1w9mGJByw==",
-      "cpu": [
-        "ia32"
-      ],
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.11.tgz",
-      "integrity": "sha512-IQ2n6af7XKLL6P1gIeZACskSxK8jWtoKpJWLZmdXTDj1MGzktUy4i+FvpdtxFmJWNavRWH1VmTr6kAubRDHeKw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "Apache-2.0 AND MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/@swc/counter": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
-      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
-      "license": "Apache-2.0"
-    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -2124,15 +1220,6 @@
         "tslib": "^2.8.0"
       }
     },
-    "node_modules/@swc/types": {
-      "version": "0.1.25",
-      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.25.tgz",
-      "integrity": "sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/counter": "^0.1.3"
-      }
-    },
     "node_modules/@szmarczak/http-timer": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
@@ -3125,6 +2212,16 @@
         "url": "https://github.com/sponsors/ueberdosis"
       }
     },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@types/bcrypt": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@types/bcrypt/-/bcrypt-6.0.0.tgz",
@@ -3308,6 +2405,31 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
+      "integrity": "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-rc.7"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@xmldom/xmldom": {
       "version": "0.8.11",
       "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz",
@@ -4236,12 +3358,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/client-only": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
-      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
-      "license": "MIT"
-    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -4364,6 +3480,19 @@
         "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
       }
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -4463,12 +3592,6 @@
         }
       }
     },
-    "node_modules/decimal.js": {
-      "version": "10.6.0",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
-      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
-      "license": "MIT"
-    },
     "node_modules/decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -5320,7 +4443,6 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -5507,6 +4629,20 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -5795,6 +4931,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
@@ -5844,6 +4989,37 @@
         "node": ">= 14"
       }
     },
+    "node_modules/i18next": {
+      "version": "25.10.4",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.10.4.tgz",
+      "integrity": "sha512-XsE/6eawy090meuFU0BTY9BtmWr1m9NSwLr0NK7/A04LA58wdAvDsi9WNOJ40Qb1E9NIPbvnVLZEN2fWDd3/3Q==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://www.locize.com/i18next"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.locize.com"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/iconv-corefoundation": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/iconv-corefoundation/-/iconv-corefoundation-1.1.7.tgz",
@@ -5883,21 +5059,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/icu-minify": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/icu-minify/-/icu-minify-4.8.2.tgz",
-      "integrity": "sha512-LHBQV+skKkjZSPd590pZ7ZAHftUgda3eFjeuNwA8/15L8T8loCNBktKQyTlkodAU86KovFXeg/9WntlAo5wA5A==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/amannn"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@formatjs/icu-messageformat-parser": "^3.4.0"
-      }
-    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -5953,18 +5114,6 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
-    "node_modules/intl-messageformat": {
-      "version": "11.1.2",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-11.1.2.tgz",
-      "integrity": "sha512-ucSrQmZGAxfiBHfBRXW/k7UC8MaGFlEj4Ry1tKiDcmgwQm1y3EDl40u+4VNHYomxJQMJi9NEI3riDRlth96jKg==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "3.1.1",
-        "@formatjs/fast-memoize": "3.1.0",
-        "@formatjs/icu-messageformat-parser": "3.5.1",
-        "tslib": "^2.8.1"
-      }
-    },
     "node_modules/ip-address": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
@@ -5975,15 +5124,6 @@
         "node": ">= 12"
       }
     },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -5994,18 +5134,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "license": "MIT",
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-interactive": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
@@ -6594,6 +5722,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.577.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.577.0.tgz",
+      "integrity": "sha512-4LjoFv2eEPwYDPg/CUdBJQSDfPyzXCRrVW1X7jrx/trgxnxkHFjnVZINbzvzxjN70dxychOfg+FTYwBiS3pQ5A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -6932,179 +6069,12 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
       "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
-    "node_modules/next": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
-      "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
-      "license": "MIT",
-      "dependencies": {
-        "@next/env": "16.1.6",
-        "@swc/helpers": "0.5.15",
-        "baseline-browser-mapping": "^2.8.3",
-        "caniuse-lite": "^1.0.30001579",
-        "postcss": "8.4.31",
-        "styled-jsx": "5.1.6"
-      },
-      "bin": {
-        "next": "dist/bin/next"
-      },
-      "engines": {
-        "node": ">=20.9.0"
-      },
-      "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.1.6",
-        "@next/swc-darwin-x64": "16.1.6",
-        "@next/swc-linux-arm64-gnu": "16.1.6",
-        "@next/swc-linux-arm64-musl": "16.1.6",
-        "@next/swc-linux-x64-gnu": "16.1.6",
-        "@next/swc-linux-x64-musl": "16.1.6",
-        "@next/swc-win32-arm64-msvc": "16.1.6",
-        "@next/swc-win32-x64-msvc": "16.1.6",
-        "sharp": "^0.34.4"
-      },
-      "peerDependencies": {
-        "@opentelemetry/api": "^1.1.0",
-        "@playwright/test": "^1.51.1",
-        "babel-plugin-react-compiler": "*",
-        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
-        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
-        "sass": "^1.3.0"
-      },
-      "peerDependenciesMeta": {
-        "@opentelemetry/api": {
-          "optional": true
-        },
-        "@playwright/test": {
-          "optional": true
-        },
-        "babel-plugin-react-compiler": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/next-intl": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/next-intl/-/next-intl-4.8.2.tgz",
-      "integrity": "sha512-GuuwyvyEI49/oehQbBXEoY8KSIYCzmfMLhmIwhMXTb+yeBmly1PnJcpgph3KczQ+HTJMXwXCmkizgtT8jBMf3A==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/amannn"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@formatjs/intl-localematcher": "^0.5.4",
-        "@parcel/watcher": "^2.4.1",
-        "@swc/core": "^1.15.2",
-        "icu-minify": "^4.8.2",
-        "negotiator": "^1.0.0",
-        "next-intl-swc-plugin-extractor": "^4.8.2",
-        "po-parser": "^2.1.1",
-        "use-intl": "^4.8.2"
-      },
-      "peerDependencies": {
-        "next": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0",
-        "typescript": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/next-intl-swc-plugin-extractor": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/next-intl-swc-plugin-extractor/-/next-intl-swc-plugin-extractor-4.8.2.tgz",
-      "integrity": "sha512-sHDs36L1VZmFHj3tPHsD+KZJtnsRudHlNvT0ieIe3iFVn5OpGLTxW3d/Zc/2LXSj5GpGuR6wQeikbhFjU9tMQQ==",
-      "license": "MIT"
-    },
-    "node_modules/next-intl/node_modules/@swc/core": {
-      "version": "1.15.11",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.11.tgz",
-      "integrity": "sha512-iLmLTodbYxU39HhMPaMUooPwO/zqJWvsqkrXv1ZI38rMb048p6N7qtAtTp37sw9NzSrvH6oli8EdDygo09IZ/w==",
-      "hasInstallScript": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/counter": "^0.1.3",
-        "@swc/types": "^0.1.25"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/swc"
-      },
-      "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.15.11",
-        "@swc/core-darwin-x64": "1.15.11",
-        "@swc/core-linux-arm-gnueabihf": "1.15.11",
-        "@swc/core-linux-arm64-gnu": "1.15.11",
-        "@swc/core-linux-arm64-musl": "1.15.11",
-        "@swc/core-linux-x64-gnu": "1.15.11",
-        "@swc/core-linux-x64-musl": "1.15.11",
-        "@swc/core-win32-arm64-msvc": "1.15.11",
-        "@swc/core-win32-ia32-msvc": "1.15.11",
-        "@swc/core-win32-x64-msvc": "1.15.11"
-      },
-      "peerDependencies": {
-        "@swc/helpers": ">=0.5.17"
-      },
-      "peerDependenciesMeta": {
-        "@swc/helpers": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/next-intl/node_modules/@swc/helpers": {
-      "version": "0.5.18",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
-      "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
-    "node_modules/next/node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
     "node_modules/node-abi": {
       "version": "4.26.0",
       "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-4.26.0.tgz",
@@ -7489,16 +6459,10 @@
       "resolved": "https://registry.npmjs.org/png-js/-/png-js-1.0.0.tgz",
       "integrity": "sha512-k+YsbhpA9e+EFfKjTCH3VW6aoKlyNYI6NYdTfDL4CIvFnvsuO84ttonmZE7rc+v23SLTH8XX+5w/Ak9v0xGY4g=="
     },
-    "node_modules/po-parser": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/po-parser/-/po-parser-2.1.1.tgz",
-      "integrity": "sha512-ECF4zHLbUItpUgE3OTtLKlPjeBN+fKEczj2zYjDfCGOzicNs0GK3Vg2IoAYwx7LH/XYw43fZQP6xnZ4TkNxSLQ==",
-      "license": "MIT"
-    },
     "node_modules/postcss": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
-      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
+      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
       "funding": [
         {
           "type": "opencollective",
@@ -7876,6 +6840,71 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.6.1.tgz",
+      "integrity": "sha512-izjXh+AkBLy3h3xe3sh6Gg1flhFHc3UyzsMftMKYJr2Z7WvAZQIdjjpHypctN41zFoeLdJUNGDgP1+Qich2fYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 25.6.2",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.1.tgz",
+      "integrity": "sha512-td+xP4X2/6BJvZoX6xw++A2DdEi++YypA69bJUV5oVvqf6/9/9nNlD70YO1e9d3MyamJEBQFEzk6mbfDYbqrSA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.1.tgz",
+      "integrity": "sha512-UJnV3Rxc5TgUPJt2KJpo1Jpy0OKQr0AjgbZzBFjaPJcFOb2Y8jA5H3LT8HUJAiRLlWrEXWHbF1Z4SCZaQjWDHw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.13.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-binary-file-arch": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/read-binary-file-arch/-/read-binary-file-arch-1.0.6.tgz",
@@ -8016,6 +7045,45 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/rolldown": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.10.tgz",
+      "integrity": "sha512-q7j6vvarRFmKpgJUT8HCAUljkgzEp4LAhPlJUvQhA5LA1SUL36s5QCysMutErzL3EbNOZOkoziSx9iZC4FddKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.120.0",
+        "@rolldown/pluginutils": "1.0.0-rc.10"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-rc.10",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.10",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.10",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.10",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.10",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.10",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.10",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.10",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.10",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.10",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.10",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.10",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.10",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.10",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.10"
+      }
+    },
+    "node_modules/rolldown/node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.10.tgz",
+      "integrity": "sha512-UkVDEFk1w3mveXeKgaTuYfKWtPbvgck1dT8TUG3bnccrH0XtLTuAyfCoks4Q/M5ZGToSVJTIQYCzy2g/atAOeg==",
+      "license": "MIT"
+    },
     "node_modules/rope-sequence": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
@@ -8120,70 +7188,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
       "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
       "license": "MIT"
     },
-    "node_modules/sharp": {
-      "version": "0.34.5",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
-      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
-      "hasInstallScript": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "dependencies": {
-        "@img/colour": "^1.0.0",
-        "detect-libc": "^2.1.2",
-        "semver": "^7.7.3"
-      },
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.34.5",
-        "@img/sharp-darwin-x64": "0.34.5",
-        "@img/sharp-libvips-darwin-arm64": "1.2.4",
-        "@img/sharp-libvips-darwin-x64": "1.2.4",
-        "@img/sharp-libvips-linux-arm": "1.2.4",
-        "@img/sharp-libvips-linux-arm64": "1.2.4",
-        "@img/sharp-libvips-linux-ppc64": "1.2.4",
-        "@img/sharp-libvips-linux-riscv64": "1.2.4",
-        "@img/sharp-libvips-linux-s390x": "1.2.4",
-        "@img/sharp-libvips-linux-x64": "1.2.4",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
-        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
-        "@img/sharp-linux-arm": "0.34.5",
-        "@img/sharp-linux-arm64": "0.34.5",
-        "@img/sharp-linux-ppc64": "0.34.5",
-        "@img/sharp-linux-riscv64": "0.34.5",
-        "@img/sharp-linux-s390x": "0.34.5",
-        "@img/sharp-linux-x64": "0.34.5",
-        "@img/sharp-linuxmusl-arm64": "0.34.5",
-        "@img/sharp-linuxmusl-x64": "0.34.5",
-        "@img/sharp-wasm32": "0.34.5",
-        "@img/sharp-win32-arm64": "0.34.5",
-        "@img/sharp-win32-ia32": "0.34.5",
-        "@img/sharp-win32-x64": "0.34.5"
-      }
-    },
-    "node_modules/sharp/node_modules/semver": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
-      "license": "ISC",
-      "optional": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -8439,29 +7455,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/styled-jsx": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
-      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
-      "license": "MIT",
-      "dependencies": {
-        "client-only": "0.0.1"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "peerDependencies": {
-        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
-      },
-      "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
-        "babel-plugin-macros": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/sumchecker": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
@@ -8637,7 +7630,6 @@
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
       "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -8838,27 +7830,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/use-intl": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-4.8.2.tgz",
-      "integrity": "sha512-3VNXZgDnPFqhIYosQ9W1Hc6K5q+ZelMfawNbexdwL/dY7BTHbceLUBX5Eeex9lgogxTp0pf1SjHuhYNAjr9H3g==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/amannn"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@formatjs/fast-memoize": "^3.1.0",
-        "@schummar/icu-type-parser": "1.21.5",
-        "icu-minify": "^4.8.2",
-        "intl-messageformat": "^11.1.0"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
@@ -8897,6 +7868,341 @@
         "node": ">=0.6.0"
       }
     },
+    "node_modules/vite": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.1.tgz",
+      "integrity": "sha512-wt+Z2qIhfFt85uiyRt5LPU4oVEJBXj8hZNWKeqFG4gRG/0RaRGJ7njQCwzFVjO+v4+Ipmf5CY7VdmZRAYYBPHw==",
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.8",
+        "rolldown": "1.0.0-rc.10",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.0",
+        "esbuild": "^0.27.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
diff --git a/package.json b/package.json
index 5560bba..e2673fa 100644
--- a/package.json
+++ b/package.json
@@ -5,13 +5,9 @@
   "type": "module",
   "main": "dist/electron/main.js",
   "scripts": {
-    "dev": "tsc -p tsconfig.electron.json && tsc -p tsconfig.preload.json && concurrently \"tsc -p tsconfig.electron.json -w\" \"tsc -p tsconfig.preload.json -w\" \"next dev -p 4000\" \"wait-on http://localhost:4000 && wait-on dist/electron/main.js && electron dist/electron/main.js\"",
-    "build:mac": "next build && tsc --project tsconfig.electron.json && tsc --project tsconfig.preload.json && electron-builder build --mac",
-    "build:win": "next build && tsc --project tsconfig.electron.json && tsc --project tsconfig.preload.json && electron-builder build --win",
-    "build:linux": "next build && tsc --project tsconfig.electron.json && tsc --project tsconfig.preload.json && electron-builder build --linux",
-    "build:all": "next build && tsc --project tsconfig.electron.json && tsc --project tsconfig.preload.json && electron-builder build --mac --win --linux",
-    "next:dev": "next dev -p 4000",
-    "next:build": "next build",
+    "dev": "vite --port 4000",
+    "build": "vite build",
+    "preview": "vite preview",
     "tauri:dev": "tauri dev",
     "tauri:build": "tauri build"
   },
@@ -35,11 +31,6 @@
     "wait-on": "^9.0.3"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
-    "@fortawesome/free-brands-svg-icons": "^7.1.0",
-    "@fortawesome/free-regular-svg-icons": "^7.1.0",
-    "@fortawesome/free-solid-svg-icons": "^7.1.0",
-    "@fortawesome/react-fontawesome": "^3.1.0",
     "@tailwindcss/postcss": "^4.1.17",
     "@tauri-apps/api": "^2.10.1",
     "@tauri-apps/plugin-shell": "^2.3.5",
@@ -51,20 +42,24 @@
     "@tiptap/react": "^3.10.7",
     "@tiptap/starter-kit": "^3.10.7",
     "@types/bcrypt": "^6.0.0",
+    "@vitejs/plugin-react": "^6.0.1",
     "autoprefixer": "^10.4.22",
     "axios": "^1.13.2",
     "bcrypt": "^6.0.0",
     "docx": "^9.5.3",
     "electron-updater": "^6.7.3",
+    "i18next": "^25.10.4",
     "jszip": "^3.10.1",
-    "next": "^16.0.3",
-    "next-intl": "^4.5.3",
+    "lucide-react": "^0.577.0",
     "node-sqlite3-wasm": "^0.8.51",
     "pdfkit": "^0.17.2",
     "postcss": "^8.5.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "tailwindcss": "^4.1.17"
+    "react-i18next": "^16.6.1",
+    "react-router-dom": "^7.13.1",
+    "tailwindcss": "^4.1.17",
+    "vite": "^8.0.1"
   },
   "build": {
     "appId": "com.eritors.scribe.desktop",
diff --git a/tsconfig.json b/tsconfig.json
index a727c4a..2415ba1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,11 +33,7 @@
       ]
     },
     "noEmit": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
+    "types": ["vite/client"]
   },
   "include": [
     "app/**/*",
@@ -48,13 +44,13 @@
     "fonts/**/*",
     "electron/**/*",
     "electron.d.ts",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
+    "hooks/**/*",
+    "shared/**/*",
+    "vite.config.ts"
   ],
   "exclude": [
     "node_modules",
     "dist",
-    ".next",
     "out"
   ]
 }